/* ══════════════════════════════════════════════════════════════════════════
   RELM GAME FX — global premium game-feel utilities.
   Drop classes on elements to get broadcast-quality polish without
   redefining the world on every page. Sport-broadcast vibe: scanlines,
   shimmer, noise, count-up support, page entrance, glow.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Color tokens (mirror existing palette) ───────────────────────────── */
:root {
  --rg-bg:        #05080d;
  --rg-bg-2:      #0a0e14;
  --rg-card:      #0f161f;
  --rg-card-2:    #141c26;
  --rg-line:      #1f2a38;
  --rg-line-2:    #2a3340;
  --rg-text:      #e8eef2;
  --rg-text-dim:  #8a96a3;
  --rg-cyan:      #26C6D6;
  --rg-cyan-2:    #0e7e8b;
  --rg-gold:      #f6b100;
  --rg-gold-2:    #b87900;
  --rg-flame:     #f97316;
  --rg-green:     #2dd87b;
  --rg-red:       #f43f5e;
  --rg-purple:    #a855f7;
}

/* ── Page entrance — staggered fade-up for premium first impression ──── */
.rg-fadeup       { animation: rgFadeUp 0.55s cubic-bezier(0.2,0.7,0.2,1) both; }
.rg-fadeup.d1    { animation-delay: 0.08s; }
.rg-fadeup.d2    { animation-delay: 0.16s; }
.rg-fadeup.d3    { animation-delay: 0.24s; }
.rg-fadeup.d4    { animation-delay: 0.32s; }
.rg-fadeup.d5    { animation-delay: 0.40s; }
@keyframes rgFadeUp {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── Subtle SVG noise overlay — adds premium texture without weight ──── */
.rg-noise { position: relative; }
.rg-noise::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay; border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Broadcast scanline overlay — barely there, but premium ──────────── */
.rg-scanlines { position: relative; }
.rg-scanlines::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.0) 0px, rgba(255,255,255,0.0) 2px,
    rgba(255,255,255,0.025) 3px, rgba(255,255,255,0.0) 4px);
  opacity: 0.7;
}

/* ── Shine sweep — runs once every ~8s for hero elements ─────────────── */
.rg-shine { position: relative; overflow: hidden; }
.rg-shine::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(110deg,
    transparent 0%, rgba(255,255,255,0.0) 35%,
    rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.0) 65%, transparent 100%);
  transform: skewX(-18deg);
  animation: rgShine 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rgShine {
  0%, 75%  { left: -60%; }
  85%      { left: 120%; }
  100%     { left: 120%; }
}

/* ── Pulsing emblem glow — for important badges, rank icons ──────────── */
.rg-pulse-glow {
  animation: rgPulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(38,198,214,0));
}
@keyframes rgPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(38,198,214,0.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(38,198,214,0.7)); }
}
.rg-pulse-glow.gold {
  animation-name: rgPulseGold;
}
@keyframes rgPulseGold {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(246,177,0,0.35)); }
  50%      { filter: drop-shadow(0 0 16px rgba(246,177,0,0.8)); }
}

/* ── Stat-bar shimmer — for loading + premium "live" feel on bars ────── */
.rg-shimmer-fill {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg,
    var(--rg-cyan-2) 0%, var(--rg-cyan) 50%, var(--rg-cyan-2) 100%);
  background-size: 200% 100%;
  animation: rgShimmer 2.4s linear infinite;
}
@keyframes rgShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Glow text — for hero numbers + KPI digits ───────────────────────── */
.rg-glow-text {
  text-shadow:
    0 0 12px rgba(38,198,214,0.45),
    0 0 26px rgba(38,198,214,0.18);
}
.rg-glow-text.gold {
  text-shadow:
    0 0 12px rgba(246,177,0,0.5),
    0 0 28px rgba(246,177,0,0.2);
}

/* ── Sport-broadcast strip — slim banner above the page ──────────────── */
.rg-broadcast-strip {
  background: linear-gradient(90deg, #0a0e14 0%, #141c26 50%, #0a0e14 100%);
  border: 1px solid var(--rg-line);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 -0.25rem 1rem; position: relative; overflow: hidden;
}
.rg-broadcast-strip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--rg-cyan), var(--rg-gold));
}
.rg-bc-live {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(244,63,94,0.14); color: #ff8093;
  border: 1px solid rgba(244,63,94,0.5);
  padding: 2px 9px; border-radius: 999px;
  font-family: 'Oswald', sans-serif; font-weight: 800;
  font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase;
}
.rg-bc-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #f43f5e; box-shadow: 0 0 8px #f43f5e;
  animation: rgPulseLive 1.4s ease-in-out infinite;
}
@keyframes rgPulseLive {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.rg-bc-label {
  font-family: 'Oswald', sans-serif; font-weight: 800;
  font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--rg-cyan);
}
.rg-bc-meta {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 0.85rem; color: #fff; letter-spacing: 0.5px;
}
.rg-bc-spacer { flex: 1; }
.rg-bc-stat {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: 'Oswald', sans-serif;
}
.rg-bc-stat-val {
  font-weight: 800; font-size: 1rem; color: var(--rg-gold);
}
.rg-bc-stat-lbl {
  font-size: 0.6rem; color: var(--rg-text-dim);
  letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
}

/* ── XP bar — animated fill from 0 to target on mount ────────────────── */
.rg-xp-bar-track {
  position: relative; height: 12px; border-radius: 6px;
  background: linear-gradient(180deg, #0a0e14, #050810);
  border: 1px solid var(--rg-line);
  overflow: hidden;
}
.rg-xp-bar-fill {
  height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--rg-cyan-2) 0%, var(--rg-cyan) 50%, #6df0ff 100%);
  box-shadow: 0 0 14px rgba(38,198,214,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative; overflow: hidden;
}
.rg-xp-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%);
  animation: rgXpSweep 3.6s ease-in-out infinite 1.6s;
}
@keyframes rgXpSweep {
  0%        { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ── Hover lift — premium card interactivity ─────────────────────────── */
.rg-lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.rg-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.55), 0 0 22px rgba(38,198,214,0.12);
}

/* ── Respect reduced motion globally ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rg-fadeup, .rg-shine::after, .rg-pulse-glow,
  .rg-shimmer-fill, .rg-xp-bar-fill, .rg-xp-bar-fill::after,
  .rg-bc-live::before {
    animation: none !important;
    transition: none !important;
  }
  .rg-xp-bar-fill { width: var(--rg-xp-target, 0%) !important; }
}