/* ========================================
   BrawlPulse Shared Components
   Extracted from repeated inline styles across all pages.
   Reduces HTML size, improves maintainability & caching.
   ======================================== */

/* --- Typography: Lilita One headings --- */
.heading-xl { font-family:'Lilita One',cursive; font-size:1.75rem; letter-spacing:-0.02em; margin:0; }
.heading-lg { font-family:'Lilita One',cursive; font-size:1.6rem; letter-spacing:-0.02em; margin:0; }
.heading-md { font-family:'Lilita One',cursive; font-size:1.5rem; letter-spacing:-0.02em; margin:0; }
.heading-sm { font-family:'Lilita One',cursive; font-size:1.1rem; letter-spacing:-0.01em; margin:0; }
.heading-xs { font-family:'Lilita One',cursive; font-size:0.9rem; letter-spacing:-0.01em; margin:0; }

/* --- Typography: Labels & body --- */
.label-uppercase { font-size:0.65rem; color:#9395BA; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; }
.label-uppercase-sm { font-size:0.65rem; color:#9395BA; text-transform:uppercase; letter-spacing:0.08em; font-weight:500; }

/* Muted / dim / text colors */
.text-muted { color:#9395BA; font-size:0.85rem; }
.text-dim { color:#9395BA; }
.text-light { color:#EEEEF8; }
.text-gold { color:#FFD000; }
.text-red { color:#F87171; }
.text-green { color:#4ADE80; }
.text-blue { color:#60A5FA; }
.text-purple { color:#C084FC; }
.text-indigo { color:#818CF8; }
.text-center { text-align:center; }
.text-right { text-align:right; }

/* Font sizes */
.text-xs { font-size:0.65rem; }
.text-sm { font-size:0.8rem; }
.text-base { font-size:0.85rem; }
.text-lg { font-size:0.95rem; }

/* --- Layout: Empty states --- */
.empty-state { padding:2rem; text-align:center; color:#9395BA; font-size:0.85rem; }
.empty-state-sm { padding:0.5rem 0.4rem; color:#9395BA; font-size:0.78rem; }

/* --- Layout: Flex utilities --- */
.flex-center { display:flex; align-items:center; gap:0.75rem; }
.flex-center-col { display:flex; flex-direction:column; align-items:center; }
.flex-col { display:flex; flex-direction:column; gap:4px; }
.flex-col-gap2 { display:flex; flex-direction:column; gap:0.5rem; }
.flex-col-gap3 { display:flex; flex-direction:column; gap:0.75rem; }
.flex-col-gap4 { display:flex; flex-direction:column; gap:1rem; }
.flex-col-gap5 { display:flex; flex-direction:column; gap:1.5rem; }
.flex-wrap { display:flex; gap:0.5rem; flex-wrap:wrap; }
.flex-wrap-gap { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.flex-row { display:flex; align-items:center; gap:0.6rem; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-items-center { display:flex; align-items:center; }
.flex-1 { flex:1; min-width:0; }
.flex-shrink-0 { flex-shrink:0; }

/* Layout: Spacing */
.container-main { max-width:1280px; margin:0 auto; padding:0 1.5rem; }
.relative { position:relative; }
.overflow-hidden { overflow:hidden; }
.min-width-0 { min-width:0; }

/* Dividers */
.divider { border:none; border-top:1px solid rgba(129,140,248,0.10); margin:0; }
.divider-light { border:none; border-top:1px solid rgba(129,140,248,0.08); margin:0; }
.divider-bottom { border-bottom:1px solid rgba(129,140,248,0.08); }
.divider-bottom-light { border-bottom:1px solid rgba(129,140,248,0.06); }

/* --- Cards & surfaces --- */
.card-padded { padding:1.25rem; }

/* --- Section labels (small uppercase) --- */
.section-label-alt { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#818CF8; }
.section-label-alt.gold { color:#FFD000; }
.section-label-alt.indigo { color:#818CF8; }

/* --- Pills / Badges --- */
.pill-sm { padding:0.25rem 0.7rem; border-radius:99px; font-size:0.72rem; font-weight:600; }
.pill-sm-blue { padding:0.25rem 0.7rem; border-radius:99px; font-size:0.72rem; font-weight:600; background:rgba(129,140,248,0.1); border:1px solid rgba(129,140,248,0.22); color:#818CF8; }
.pill-sm-gold { padding:0.25rem 0.7rem; border-radius:99px; font-size:0.72rem; font-weight:600; background:rgba(255,208,0,0.1); border:1px solid rgba(255,208,0,0.22); color:#FFD000; }
.pill-sm-green { padding:0.25rem 0.7rem; border-radius:99px; font-size:0.72rem; font-weight:600; background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.22); color:#4ADE80; }

/* Mode badge (used in events, player battle log) */
.mode-badge { font-size:0.65rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:3px 10px; border-radius:99px; }

/* Brawler image ring */
.brawler-img-ring { width:72px; height:72px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#818CF8,rgba(255,255,255,0.05)); padding:3px; box-shadow:0 0 0 1px rgba(255,255,255,0.06); }
.brawler-img-ring img { width:100%; height:100%; border-radius:11px; object-fit:cover; display:block; background:#0E1122; }

/* --- Brawler list row item (reused in explorer, maps, modes) --- */
.brawler-list-item { display:flex; align-items:center; gap:0.6rem; padding:0.3rem 0.4rem; border-radius:8px; text-decoration:none; transition:background 0.12s; }
.brawler-list-item:hover { background:rgba(255,255,255,0.05); }

/* --- Rank number small (1-3) --- */
.rank-pos { font-family:'Lilita One',cursive; font-size:0.75rem; width:1.1rem; text-align:center; flex-shrink:0; }
.rank-pos.gold { color:#FFD000; }
.rank-pos.grey { color:#9395BA; }

/* --- Unstyled list reset --- */
.list-reset { margin:0; padding:0; list-style:none; }

/* --- Breadcrumb navigation link --- */
.breadcrumb-link { color:#9395BA; text-decoration:none; transition:color 0.15s; font-size:0.75rem; }
.breadcrumb-link:hover { color:#EEEEF8; }

/* --- Back-to-top button (shared) --- */
.btn-back-top {
  position:fixed; bottom:1.5rem; right:1.5rem;
  width:40px; height:40px; border-radius:12px;
  background:rgba(14,17,34,0.92); border:1px solid rgba(129,140,248,0.18);
  color:#9395BA; cursor:pointer; display:none;
  align-items:center; justify-content:center; z-index:900;
  backdrop-filter:blur(8px);
  transition:color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn-back-top:hover { color:#EEEEF8; border-color:rgba(129,140,248,0.3); transform:translateY(-2px); }

/* Text overflow ellipsis */
.text-nowrap { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-wrap { overflow-wrap:anywhere; }

/* Justify alignment */
.justify-end { display:flex; justify-content:flex-end; }
.justify-center { display:flex; justify-content:center; }

/* Status dot (colored circle indicator) */
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Flex gap variants */
.flex-col-gap1 { display:flex; flex-direction:column; gap:0.4rem; }
.flex-gap-4 { gap:0.4rem; }

/* Empty state with smaller padding */
.empty-state-sm.pad-05 { padding:0.5rem; }

/* Fine-print label (0.62rem uppercase) */
.label-uppercase-xs { font-size:0.62rem; color:#9395BA; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; }

/* Section divider header (used in brawler accessories) */
.section-divider {
  border-top:1px solid var(--border);
  padding:0.75rem 1.25rem 0.25rem;
  color:var(--text-dim);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.06em;
}

/* Brawler row item with background (used in player page sidebar) */
.flex-between-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.6rem 0.875rem;
  background:rgba(129,140,248,0.05);
  border-radius:10px;
}

/* Column header (table grid header) */
.col-header {
  font-size:0.65rem;
  font-weight:700;
  color:#9395BA;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* Brawler stat strip label */
.stat-strip-label {
  color:#9395BA;
  font-size:0.62rem;
  margin-top:0.3rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

/* BG ambient gradient (shared) */
.bg-ambient {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(99,102,241,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(139,92,246,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(14,17,34,1) 0%, #070810 100%);
}

/* Card hover highlight (used on homepage promos) */
.card-highlight {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-highlight:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,208,0,0.15);
  border-color: rgba(255,208,0,0.18);
}

/* ========================================
   Base reset (shared across all pages)
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: #070810;
  color: #EEEEF8;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; }

/* Subtle noise/grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.6;
}

/* ========================================
   Shared animations
   ======================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeUp 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.1s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.2s; }
.delay-5 { animation-delay: 0.25s; }
.delay-6 { animation-delay: 0.3s; }
.delay-7 { animation-delay: 0.35s; }
.delay-8 { animation-delay: 0.4s; }

/* ========================================
   Shared UI components
   ======================================== */
.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #818CF8;
  margin-bottom: 0.5rem;
}
.card {
  background: #0E1122;
  border: 1px solid rgba(129, 140, 248, 0.12);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 32px rgba(0, 0, 0, 0.3);
}
.btn-gold {
  background: linear-gradient(135deg, #FFD000 0%, #FF9A1A 100%);
  color: #070810;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(255, 208, 0, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, opacity 0.15s ease;
  font-family: 'Inter', sans-serif;
}
.btn-gold:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 16px rgba(255,208,0,0.35); }
.btn-gold:active { transform: scale(0.97); opacity: 0.9; }
.btn-gold:focus-visible { outline: 2px solid #818CF8; outline-offset: 3px; }
.btn-ghost {
  background: transparent;
  color: #9395BA;
  border: 1px solid rgba(129, 140, 248, 0.15);
  border-radius: 10px;
  padding: 0.6rem 1.2rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}
.btn-ghost:hover { color: #EEEEF8; border-color: rgba(129,140,248,0.25); background: rgba(129,140,248,0.07); }
.btn-ghost:active { transform: scale(0.97); }
.btn-ghost:focus-visible { outline: 2px solid #818CF8; outline-offset: 3px; }
.search-input {
  background: rgba(129, 140, 248, 0.08);
  border: 1px solid rgba(129, 140, 248, 0.15);
  border-radius: 12px;
  padding: 0.85rem 1.2rem;
  color: #EEEEF8;
  font-size: 1rem;
  width: 100%;
  outline: none;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.search-input::placeholder { color: #9395BA; }
.search-input:focus {
  border-color: rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
  background: rgba(129, 140, 248, 0.12);
}

/* Gold text utility */
.org { color: #FFD000; }

/* Flex row with gap utility */
.w { display: flex; align-items: center; gap: 0.3rem; }

/* Active state utility */
.active { background: rgba(129,140,248,0.12); color: #818cf8 !important; }

/* ========================================
   Skeleton / shimmer loading
   ======================================== */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, rgba(129,140,248,0.05) 25%, rgba(255,255,255,0.06) 50%, rgba(129,140,248,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
  display: inline-block;
}

/* Alternative skeleton used in brawlers.html for circular avatars */
.skel {
  background: linear-gradient(90deg, rgba(129,140,248,0.06) 25%, rgba(129,140,248,0.12) 50%, rgba(129,140,248,0.06) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

/* Explorer skeleton (slightly different gradient than .shimmer) */
.skeleton {
  background: linear-gradient(90deg, rgba(129,140,248,0.04) 25%, rgba(129,140,248,0.09) 50%, rgba(129,140,248,0.04) 75%);
  background-size: 200%;
  animation: shimmer 1.4s infinite;
  border-radius: 5px;
}