/* ═══════════════════════════════════════════════════════════════
   REAPER SQUAD — EXACT REFERENCE RECREATION
   Extracted from screenshot: AAA mobile RPG dashboard quality
   Visual target: Honkai Star Rail / Valorant profile UI
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. GLOBAL FOUNDATION
   BG: var(--bg) deep navy-purple, NOT black
   Cards: var(--card) slightly lighter navy
   Borders: rgba(255,255,255,0.07) — barely visible
───────────────────────────────────────────── */
body {
  background: var(--bg) !important;
}

/* Subtle ambient purple gradient across entire page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(100,60,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 80%, rgba(80,40,200,0.06) 0%, transparent 50%);
  animation: ambientShift 12s ease-in-out infinite alternate;
}
@keyframes ambientShift {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ─────────────────────────────────────────────
   2. HEADER — exact reference match
   bg: var(--card), border-bottom barely visible
───────────────────────────────────────────── */
.app-hdr {
  background: var(--card) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* REAPER — white bold, SQUAD — purple */
.hdr-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  -webkit-text-fill-color: unset !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  animation: none !important;
  filter: none !important;
}

/* Header username pill (gold/amber) */
.hdr-user {
  background: rgba(251,191,36,0.15) !important;
  border: 1px solid rgba(251,191,36,0.35) !important;
  border-radius: 12px !important;
  padding: 3px 9px !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.5px !important;
}

/* Rank #1 — solid purple bg */
.hdr-rank {
  background: #3d2a8a !important;
  border-radius: 8px !important;
  padding: 4px 9px !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Settings gear button */
.hdr-settings-btn {
  background: rgba(100,60,255,0.15) !important;
  border: 1px solid rgba(100,60,255,0.3) !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  color: #a78bfa !important;
}

/* ─────────────────────────────────────────────
   3. PROFILE CARD — exact reference
   Full-width, var(--card), avatar with ring glow,
   title pill, XP bar bright purple
───────────────────────────────────────────── */
.gami-profile {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
/* Faint purple light leak top-right (matches reference) */
.gami-profile::after {
  content: '';
  position: absolute;
  top: -30px; right: -20px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,60,255,0.18) 0%, transparent 70%);
  pointer-events: none;
  animation: profileLeak 5s ease-in-out infinite alternate;
}
@keyframes profileLeak {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.3); }
}
.gami-profile::before { display: none !important; }

/* Avatar — circular with bright purple ring glow */
.gami-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 3px solid var(--accent) !important;
  background: var(--bg) !important;
  box-shadow:
    0 0 0 1px rgba(124,58,255,0.3),
    0 0 12px rgba(124,58,255,0.6),
    0 0 28px rgba(124,58,255,0.25) !important;
  animation: avatarRingPulse 3s ease-in-out infinite !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  flex-shrink: 0 !important;
}
@keyframes avatarRingPulse {
  0%,100% {
    box-shadow: 0 0 0 1px rgba(124,58,255,0.3), 0 0 12px rgba(124,58,255,0.55), 0 0 24px rgba(124,58,255,0.2);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(124,58,255,0.5), 0 0 20px rgba(124,58,255,0.8), 0 0 40px rgba(124,58,255,0.35);
  }
}

/* Level badge pill — bright purple pill like reference */
.gami-title {
  display: inline-block !important;
  background: #5b21b6 !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #e9d5ff !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.3px !important;
}

/* Username */
.gami-name {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.2px !important;
}

/* XP bar — exact reference: bright solid purple on dark track */
.gami-xp-bar {
  height: 8px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.gami-xp-fill {
  background: var(--accent) !important;
  border-radius: 10px !important;
  height: 100% !important;
  box-shadow: 0 0 8px rgba(124,58,255,0.7), 0 0 16px rgba(124,58,255,0.3) !important;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Traveling shimmer on XP bar */
.gami-xp-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: xpBarShimmer 2.8s ease-in-out infinite;
  will-change: transform;
}
/* GPU-friendly: translateX(%) is relative to this element's own width (60%
   of the parent), so 366.667% covers the same -80% -> 140% travel distance
   across the parent that the old `left` keyframe produced, without triggering
   layout on every frame. */
@keyframes xpBarShimmer {
  0%       { transform: translateX(0); }
  60%,100% { transform: translateX(366.667%); }
}
.gami-xp-lbl {
  font-size: 0.62rem !important;
  color: rgba(255,255,255,0.4) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────
   4. SCORE RING SECTION — exact reference
   Large ring ~160px, thick stroke, purple neon
   glow radiating outward. Hot white dot at top.
   LEFT side: big ring. RIGHT side: stats 2×2.
───────────────────────────────────────────── */
.score-sec {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
/* Ambient purple glow behind ring (emanates from ring area) */
.score-sec::before {
  content: '';
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,50,255,0.14) 0%, rgba(80,20,200,0.06) 40%, transparent 70%);
  pointer-events: none;
  animation: ringAmbient 4s ease-in-out infinite alternate;
}
@keyframes ringAmbient {
  0%   { opacity: 0.6; transform: translateY(-50%) scale(1); }
  100% { opacity: 1;   transform: translateY(-50%) scale(1.15); }
}

/* Ring wrap — the circular SVG container */
.ring-wrap {
  width: 150px !important;
  height: 150px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.score-ring {
  width: 150px !important;
  height: 150px !important;
  transform: rotate(-90deg) !important;
  filter: drop-shadow(0 0 9px rgba(124,58,255,0.5)) drop-shadow(0 0 20px rgba(124,58,255,0.25)) !important;
  animation: ringGlow 3.5s ease-in-out infinite alternate !important;
  will-change: filter;
}
@keyframes ringGlow {
  0%   { filter: drop-shadow(0 0 8px rgba(124,58,255,0.45)); }
  100% { filter: drop-shadow(0 0 18px rgba(124,58,255,0.78)); }
}
.ring-bg {
  fill: none !important;
  stroke: rgba(255,255,255,0.06) !important;
  stroke-width: 11 !important;
}
.ring-fill {
  fill: none !important;
  stroke: var(--accent) !important;
  stroke-width: 11 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 413 !important; /* 2π×(75-5.5) for r=69.5 approx use viewBox 0 0 150 150 */
  stroke-dashoffset: 413 !important;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4,0,0.2,1) !important;
}
/* White hot-spot particle orbiting the ring */
.ring-wrap::before {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 20px rgba(220,180,255,1), 0 0 40px rgba(124,58,255,0.8);
  top: 6px; left: 50%;
  transform: translateX(-50%);
  animation: ringDot 3.5s ease-in-out infinite alternate;
  z-index: 2;
  will-change: opacity;
}
@keyframes ringDot {
  0%   { opacity: 0.9; }
  100% { opacity: 1; }
}
/* Second outer subtle ring (glow ring) */
.ring-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(124,58,255,0.25);
  box-shadow: 0 0 20px rgba(124,58,255,0.18);
  pointer-events: none;
  animation: outerRingPulse 3s ease-in-out infinite alternate;
  will-change: opacity;
}
@keyframes outerRingPulse {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* Ring text overlay */
.ring-num {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important;
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  line-height: 1 !important;
  z-index: 3 !important;
  letter-spacing: -1px !important;
}

/* Score info — right side */
.score-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.score-title {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}
.score-sub {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 8px !important;
}

/* Week dots row */
.week-strip {
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
  flex-wrap: nowrap !important;
}
.wday {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
.wday-lbl {
  font-size: 0.5rem !important;
  color: rgba(255,255,255,0.3) !important;
  font-weight: 600 !important;
}
.wday-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}
.wday-dot.done {
  background: var(--accent2) !important;
  box-shadow: 0 0 6px rgba(74,222,128,0.6) !important;
}
.wday-dot.today-a {
  background: rgba(124,58,255,0.4) !important;
  border: 1.5px solid var(--accent) !important;
  box-shadow: 0 0 10px rgba(124,58,255,0.9) !important;
  animation: todayDot 1.5s ease-in-out infinite !important;
  will-change: opacity;
}
@keyframes todayDot {
  0%,100% { opacity: 0.75; }
  50%     { opacity: 1; }
}

/* Stats 2×2 grid inside score section */
.gami-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
  margin-bottom: 0 !important;
}
.gami-stat {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
}
.gami-stat-num {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  animation: none !important;
  display: block !important;
  line-height: 1 !important;
}
.gami-stat-lbl {
  font-size: 0.58rem !important;
  color: rgba(255,255,255,0.35) !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  display: block !important;
}
/* Stat 1 - Fire streak - orange label */
.gami-stat:nth-child(1) .gami-stat-lbl { color: #fb923c !important; }
/* Stat 2 - Best streak - cyan label */
.gami-stat:nth-child(2) .gami-stat-lbl { color: #22d3ee !important; }
/* Stat 3 - XP earned - purple label */
.gami-stat:nth-child(3) .gami-stat-lbl { color: rgba(255,255,255,0.35) !important; }
/* Stat 4 - Badges - green label */
.gami-stat:nth-child(4) .gami-stat-lbl { color: var(--accent2) !important; }

/* Stat icon area */
.gami-stat-icon-wrap {
  flex-shrink: 0;
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
}

/* ─────────────────────────────────────────────
   5. MINI STAT TILES (Today / Streak / Badges)
   3 cards in a row — each has icon in colored sq,
   number, label. Exactly as reference.
───────────────────────────────────────────── */
.gami-wrap .gami-stats-mini-row,
#gamiMiniRow {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 9px !important;
  margin-bottom: 10px !important;
}
/* Override stat-tiles for home mini row if rendered there */
.stat-tiles {
  grid-template-columns: repeat(3,1fr) !important;
  gap: 9px !important;
}
.stat-tile {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  padding: 12px 10px !important;
  text-align: center !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: relative !important;
}
.stat-tile::before { display: none !important; }
.st-val {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  margin-bottom: 2px !important;
}
.st-lbl {
  font-size: 0.58rem !important;
  color: rgba(255,255,255,0.35) !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────
   6. GAMIFICATION TOGGLE — matches reference
   The collapsible profile card section
───────────────────────────────────────────── */
.gami-toggle-bar {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}
.gami-toggle-bar:hover {
  border-color: rgba(124,58,255,0.3) !important;
  box-shadow: none !important;
}
.gami-toggle-bar.open {
  border-radius: 16px 16px 0 0 !important;
  border-color: rgba(124,58,255,0.25) !important;
}
.gami-body {
  background: var(--card) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
.gami-toggle-av {
  background: rgba(124,58,255,0.15) !important;
  border: 2px solid rgba(124,58,255,0.4) !important;
  box-shadow: none !important;
}
.gami-toggle-name { color: #fff !important; }
.gami-toggle-sub { color: #a78bfa !important; }

/* ─────────────────────────────────────────────
   7. TABS — Badges / Levels / Avatar
   Exact reference: single row, active=filled purple
   pill, inactive=text+icon only
───────────────────────────────────────────── */
.gami-tabs {
  background: rgba(0,0,0,0.2) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  margin-bottom: 10px !important;
}
.gami-tab {
  border-radius: 9px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.4) !important;
  padding: 7px 6px !important;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  background: transparent !important;
  border: none !important;
}
.gami-tab.active {
  background: #3d2a8a !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(61,42,138,0.5) !important;
}

/* The outer tabs card */
.gami-body-inner > div:has(.gami-tabs),
.gami-body-inner {
  padding: 12px !important;
}

/* ─────────────────────────────────────────────
   8. HABITS SECTION — exact reference
   NOT a grid — it's a single card with list rows
   Each row: big emoji, name+pts, circle checkbox
───────────────────────────────────────────── */
.sec-title {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.sec-title::after {
  display: none !important;
}

/* Habit grid — override to single column list */
.habit-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.habit-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: none !important;
  margin: 0 !important;
  animation: none !important;
  transition: background 0.18s ease !important;
  will-change: auto !important;
  contain: none !important;
}
.habit-card:last-child {
  border-bottom: none !important;
}
.habit-card:active {
  background: rgba(124,58,255,0.06) !important;
  transform: none !important;
}
.habit-card:hover {
  background: rgba(255,255,255,0.02) !important;
  transform: none !important;
  box-shadow: none !important;
}
.habit-card.done {
  background: rgba(74,222,128,0.04) !important;
  border-bottom-color: rgba(74,222,128,0.08) !important;
  box-shadow: none !important;
}
/* Override nth-child stagger animations for habits */
.habit-card:nth-child(1),
.habit-card:nth-child(2),
.habit-card:nth-child(3),
.habit-card:nth-child(4) {
  animation: none !important;
}

/* Habit top row overrides */
.hc-top {
  display: none !important; /* We reconfigure layout via flex directly */
}
/* Actually, keep hc-top but reformat */
.hc-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  flex: 1 !important;
}
.hc-emoji {
  font-size: 2rem !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  text-align: center !important;
  display: none !important; /* moved to card layout */
}
.hc-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 2px !important;
}
.hc-pts {
  font-size: 0.65rem !important;
  color: rgba(255,255,255,0.35) !important;
}
/* Checkbox circle */
.hc-chk {
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.habit-card.done .hc-chk {
  background: var(--accent2) !important;
  border-color: var(--accent2) !important;
  box-shadow: 0 0 10px rgba(74,222,128,0.5) !important;
  color: #000 !important;
}
/* Done sparkle removed — keep clean */
.habit-card.done::after { display: none !important; }
.habit-card.done::before { display: none !important; }

/* Habit "+1 Pts Each" badge */
.habit-pts-badge {
  background: #3d2a8a !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  color: #e9d5ff !important;
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────────
   9. BOTTOM NAV — exact reference
   bg: dark, active=purple icon+text, thin top
───────────────────────────────────────────── */
.bnav-wrap {
  background: #0f0f24 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.bnav {
  flex: 1 !important;
  padding: 10px 4px 8px !important;
  color: rgba(255,255,255,0.3) !important;
  transition: color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  position: relative !important;
}
.bnav:active { transform: scale(0.9) !important; }
.bnav.active {
  color: var(--accent) !important;
  transform: none !important;
}
.bn-ico { font-size: 1.25rem !important; display: block !important; }
.bn-lbl { font-size: 0.6rem !important; font-weight: 700 !important; }

/* Active nav — purple top line exactly like reference */
.bnav.active::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 32px !important; height: 2px !important;
  background: var(--accent) !important;
  border-radius: 0 0 3px 3px !important;
  box-shadow: 0 0 8px rgba(124,58,255,0.6) !important;
}
.bnav.active::after { display: none !important; }
/* OLD nav dot override */
.bnav::after { display: none !important; }

/* ─────────────────────────────────────────────
   10. SCORE SECTION — REWRITE SVG RING SIZE
   The viewBox must match radius for stroke-width:11
   Use r=69.5 in viewBox="0 0 150 150"
   circumference = 2π×69.5 = ~436.6
───────────────────────────────────────────── */
/* Override ring-fill dasharray via JS (see premium-animations.js) */

/* ─────────────────────────────────────────────
   11. TRAIN PAGE — premium match
───────────────────────────────────────────── */
.train-hero-banner {
  background: linear-gradient(160deg, #1a1040 0%, #0f0830 50%, #1a1040 100%) !important;
  border: 1px solid rgba(124,58,255,0.2) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}
.train-hero-banner::before {
  content: '' !important;
  position: absolute !important;
  top: -40%; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 180px; height: 180px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(124,58,255,0.2) 0%, transparent 70%) !important;
  filter: blur(20px) !important;
  pointer-events: none !important;
  animation: heroBannerGlow 5s ease-in-out infinite alternate !important;
}
@keyframes heroBannerGlow {
  0%   { opacity: 0.6; transform: translateX(-50%) scale(1); }
  100% { opacity: 1;   transform: translateX(-50%) scale(1.4); }
}
.thb-skull {
  font-size: 2.8rem !important;
  filter: drop-shadow(0 0 16px rgba(124,58,255,0.7)) !important;
  animation: skullHover 3s ease-in-out infinite !important;
}
@keyframes skullHover {
  0%,100% { transform: translateY(0); filter: drop-shadow(0 0 14px rgba(124,58,255,0.6)); }
  50%     { transform: translateY(-5px); filter: drop-shadow(0 0 24px rgba(124,58,255,0.9)); }
}
.thb-title {
  display: block !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin-bottom: 6px !important;
  text-shadow: 0 0 20px rgba(124,58,255,0.5) !important;
}

.train-section-wrap {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.train-section-wrap:hover {
  border-color: rgba(124,58,255,0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.train-section-wrap::before { display: none !important; }

.tsec-icon {
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: rgba(124,58,255,0.15) !important;
  border: 1px solid rgba(124,58,255,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
}
.tsec-title {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.tsec-sub { font-size: 0.65rem !important; color: rgba(255,255,255,0.4) !important; }
.tsec-count {
  background: rgba(124,58,255,0.12) !important;
  border: 1px solid rgba(124,58,255,0.25) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 0.63rem !important;
  font-weight: 800 !important;
  color: #a78bfa !important;
}

/* Empty state skill plan */
.skill-plan-card-empty,
#homeSkillPlanSection > div:first-child {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 32px 20px !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}
#homeSkillPlanSection > div:first-child::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(124,58,255,0.5), transparent) !important;
  animation: emptyBeam 3s ease-in-out infinite !important;
}
@keyframes emptyBeam {
  0%,100% { opacity: 0.4; }
  50%     { opacity: 1; }
}

.skill-plan-empty-skull {
  font-size: 3rem !important;
  display: block !important;
  margin-bottom: 12px !important;
  filter: drop-shadow(0 0 16px rgba(124,58,255,0.6)) !important;
  animation: emptySkullBreath 3s ease-in-out infinite !important;
}
@keyframes emptySkullBreath {
  0%,100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 12px rgba(124,58,255,0.5)); }
  50%     { transform: scale(1.06) translateY(-4px); filter: drop-shadow(0 0 22px rgba(124,58,255,0.8)); }
}

.ai-cta-btn, .skill-plan-cta-btn {
  background: linear-gradient(135deg, #6d28d9, var(--accent)) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 13px 24px !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(109,40,217,0.45) !important;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  animation: none !important;
}
.ai-cta-btn::after, .skill-plan-cta-btn::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent) !important;
  animation: ctaBtnShimmer 3.5s ease-in-out infinite !important;
  will-change: transform !important;
}
/* GPU-friendly: element width == parent width here, so 300% translateX
   reproduces the original -100% -> 200% `left` travel exactly, without
   triggering layout on every frame. */
@keyframes ctaBtnShimmer {
  0%       { transform: translateX(0); }
  60%,100% { transform: translateX(300%); }
}
.ai-cta-btn:hover, .skill-plan-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(109,40,217,0.6) !important;
}
.ai-cta-btn:active, .skill-plan-cta-btn:active {
  transform: scale(0.97) !important;
}

/* ─────────────────────────────────────────────
   12. EXERCISE CARDS
───────────────────────────────────────────── */
.ex-card {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.ex-card:hover {
  border-color: rgba(124,58,255,0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
.add-ex-btn {
  background: rgba(124,58,255,0.06) !important;
  border: 1px dashed rgba(124,58,255,0.3) !important;
  color: #a78bfa !important;
  transition: all 0.2s ease !important;
  animation: none !important;
}
.add-ex-btn:hover {
  background: rgba(124,58,255,0.12) !important;
  border-color: rgba(124,58,255,0.5) !important;
}

/* ─────────────────────────────────────────────
   13. LEADERBOARD — premium dashboard polish
   Filters, podium, rank rows, badges, compare box
───────────────────────────────────────────── */
.lb-filters {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.fchip { color: rgba(255,255,255,0.45) !important; }
.fchip.active {
  background: linear-gradient(135deg, var(--accent), #6024d4) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(124,58,255,0.4) !important;
}

.pod-name { color: #fff !important; }
.pod-pts { color: #a78bfa !important; }
.pod-item.p1 .pod-pts { color: #fbbf24 !important; }
.pod-av { box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important; }

.lb-row {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
}
.lb-row.is-me {
  border-color: rgba(124,58,255,0.5) !important;
  background: linear-gradient(135deg, rgba(124,58,255,0.14), rgba(124,58,255,0.04)) !important;
  box-shadow: 0 0 0 1px rgba(124,58,255,0.2) !important;
}
.lb-row:first-child {
  animation: none !important;
}
.lb-rank {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.45) !important;
}
.lb-name { color: #fff !important; }
.lb-name.me { color: #c4b5fd !important; }
.lb-sub { color: rgba(255,255,255,0.4) !important; }
.lb-pts { color: #fff !important; }
.lb-row.is-me .lb-pts { color: #c4b5fd !important; }
.lb-bar-f { background: linear-gradient(90deg, var(--accent), #a78bfa) !important; }

.lb-compare-box {
  background: var(--card) !important;
  border-color: rgba(124,58,255,0.25) !important;
}
.lb-compare-title { color: #a78bfa !important; }
.lb-refresh-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.45) !important;
}
.lb-refresh-btn:active { background: rgba(255,255,255,0.08) !important; }

/* ─────────────────────────────────────────────
   14. MODAL — matches dark panel aesthetic
───────────────────────────────────────────── */
.modal-box {
  background: var(--card) !important;
  border-top: 1px solid rgba(124,58,255,0.25) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.7) !important;
}
.modal-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.modal-close {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.5) !important;
}
.minput {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
.minput:focus {
  border-color: rgba(124,58,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(124,58,255,0.1) !important;
  outline: none !important;
}
.modal-submit {
  background: linear-gradient(135deg, #6d28d9, var(--accent)) !important;
  border: none !important;
  border-radius: 11px !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(109,40,217,0.4) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.modal-submit:active { transform: scale(0.97) !important; }

/* ─────────────────────────────────────────────
   15. TOAST
───────────────────────────────────────────── */
#toast {
  background: #1e1b4b !important;
  border: 1px solid rgba(124,58,255,0.3) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  backdrop-filter: none !important;
}

/* ─────────────────────────────────────────────
   16. AUTH BOX
───────────────────────────────────────────── */
.auth-box {
  background: var(--card) !important;
  border: 1px solid rgba(124,58,255,0.2) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(124,58,255,0.1) !important;
}
.auth-btn {
  background: linear-gradient(135deg, #6d28d9, var(--accent)) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(109,40,217,0.4) !important;
  transition: transform 0.15s ease !important;
}
.auth-btn:active { transform: scale(0.97) !important; }

/* ─────────────────────────────────────────────
   17. BADGE ITEMS
───────────────────────────────────────────── */
.badge-item {
  background: #1a1a35 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  animation: badgePop 0.4s cubic-bezier(0.21,1.04,0.67,0.98) both !important;
}
.badge-item:not(.locked):hover {
  border-color: rgba(124,58,255,0.4) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.85) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* ─────────────────────────────────────────────
   18. LEVEL ROWS
───────────────────────────────────────────── */
.lv-row {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
}
.lv-row.active {
  background: rgba(124,58,255,0.1) !important;
  border-color: rgba(124,58,255,0.35) !important;
}
.lv-num { background: rgba(255,255,255,0.06) !important; }
.lv-row.active .lv-num {
  background: var(--accent) !important;
  box-shadow: 0 0 10px rgba(124,58,255,0.4) !important;
}

/* ─────────────────────────────────────────────
   19. AVATAR ITEMS
───────────────────────────────────────────── */
.av-item {
  background: rgba(255,255,255,0.03) !important;
  border: 2px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.av-item:hover {
  border-color: rgba(124,58,255,0.35) !important;
  transform: translateY(-2px) !important;
}
.av-item.selected {
  border-color: var(--accent) !important;
  background: rgba(124,58,255,0.1) !important;
  box-shadow: 0 0 14px rgba(124,58,255,0.25) !important;
}

/* ─────────────────────────────────────────────
   20. PAGE HEADER
───────────────────────────────────────────── */
.page-hdr {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 14px !important;
}

/* ─────────────────────────────────────────────
   21. SETTINGS PANEL
───────────────────────────────────────────── */
#settingsPanel {
  background: #0f0f24 !important;
  border-left-color: rgba(255,255,255,0.07) !important;
}

/* ─────────────────────────────────────────────
   22. RIPPLE
───────────────────────────────────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(124,58,255,0.2);
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ─────────────────────────────────────────────
   24. SCROLLBAR
───────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,255,0.3); border-radius: 10px; }

/* ─────────────────────────────────────────────
   25. PERFORMANCE
───────────────────────────────────────────── */
.score-ring, .ring-wrap, .gami-avatar,
.habit-card, .train-section-wrap, .badge-item, .bnav {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─────────────────────────────────────────────
   26. GLOBAL OVERRIDES — neutralize conflicting styles
───────────────────────────────────────────── */
/* Remove box shadows we don't want */
.score-sec, .gami-profile, .habit-grid,
.gami-toggle-bar, .gami-body, .stat-tile {
  box-shadow: none !important;
}
/* Remove competing glows */
.score-ring {
  animation: ringGlow 3.5s ease-in-out infinite alternate !important;
}

/* Prevent old premium-ui orbs from interfering */
#reaperGlowOrb1, #reaperGlowOrb2, #reaperGlowOrb3 {
  display: none !important;
}

/* ─────────────────────────────────────────────
   28. PROFILE HERO CARD (Phase 1 — Profile UI recreation)
   Banner + overlapping PFP + name/rank pill/XP bar.
   Banner + PFP art are static placeholders (existing
   icon-512.png asset) — no cosmetic system here yet.
   Structure carries data-avatar-id/data-banner-id hooks
   for Phase 2 to populate without touching this markup.
───────────────────────────────────────────── */
.phc-card {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}
.phc-banner {
  height: 148px;
  background-size: cover;
  background-position: center 18%;
  background-color: var(--bg);
  position: relative;
}
.phc-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,31,0) 45%, rgba(21,21,48,0.95) 100%);
}
.phc-body {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 16px 16px;
  margin-top: -40px;
}
.phc-pfp-wrap { position: relative; flex-shrink: 0; z-index: 2; }
.phc-pfp {
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px var(--card), 0 0 16px rgba(124,58,255,0.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.phc-pfp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phc-pfp-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.phc-pfp-badge {
  position: absolute; bottom: 0; right: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent2); border: 2px solid var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; color: #06210f; pointer-events: none;
}
.phc-info { flex: 1; min-width: 0; padding-bottom: 3px; }
.phc-name {
  font-size: 1.05rem; font-weight: 900; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phc-rank-pill {
  display: inline-block; margin-top: 4px;
  background: #5b21b6; color: #e9d5ff;
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 11px; border-radius: 20px;
}
.phc-xp-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.phc-xp-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.phc-xp-fill { height: 100%; background: var(--accent); border-radius: 10px; box-shadow: 0 0 8px rgba(124,58,255,0.6); transition: width 0.9s cubic-bezier(0.4,0,0.2,1); }
.phc-xp-lbl { font-size: 0.62rem; color: rgba(255,255,255,0.45); white-space: nowrap; flex-shrink: 0; }

/* ── Home stats grid (Workouts / Streak / Badges / Total XP) ── */
#homeStatsGrid.stat-tiles {
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
  margin-bottom: 14px !important;
}
.phc-stat-top { display: flex; align-items: center; gap: 6px; justify-content: center; margin-bottom: 6px; }
.phc-stat-icon { font-size: 0.9rem; }
.phc-stat-sub { font-size: 0.58rem; color: rgba(255,255,255,0.32); margin-top: 2px; }

/* ─────────────────────────────────────────────
   27. REDUCE MOTION SAFETY
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}