/* ═══════════════════════════════════════════════════════════════
   OVERKILL 鬼神 — Design System v9
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-abyss:     #050506;
  --bg-void:      #0A0A0B;
  --bg-obsidian:  #111113;
  --bg-steel:     #1A1A1D;
  --bg-iron:      #2A2A2E;
  --text-ghost:   #E5E5E5;
  --text-ash:     #9CA3AF;
  --text-smoke:   #6B7280;
  --accent-blood: #DC2626;
  --accent-ember: #EF4444;
  --accent-gold:  #D4A017;
  --accent-sun:   #F59E0B;
  --accent-jade:  #10B981;
  --font-display: 'Bebas Neue', cursive;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-body) !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-blood {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.25rem;
  background: var(--accent-blood); color: #fff;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  border-radius: .375rem; border: none; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  text-decoration: none;
}
.btn-blood:hover {
  background: var(--accent-ember);
  box-shadow: 0 0 18px rgba(220,38,38,.5);
  transform: translateY(-1px);
  color: #fff;
}
.btn-blood:active { transform: translateY(0); }

.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.25rem;
  background: var(--accent-gold); color: #0a0a0b;
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  border-radius: .375rem; border: none; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  text-decoration: none;
}
.btn-gold:hover {
  background: var(--accent-sun);
  box-shadow: 0 0 18px rgba(212,160,23,.45);
  transform: translateY(-1px);
  color: #0a0a0b;
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.25rem;
  background: transparent; color: var(--text-ash);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  border-radius: .375rem; border: 1px solid var(--bg-iron);
  cursor: pointer; transition: border-color .15s, color .15s;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--text-ash); color: var(--text-ghost); }

/* ── Cards ─────────────────────────────────────────────────── */
.card-overkill {
  background: var(--bg-obsidian); border: 1px solid var(--bg-iron);
  border-radius: .75rem; padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}
.card-overkill:hover {
  border-color: rgba(220,38,38,.35);
  box-shadow: 0 0 24px rgba(220,38,38,.08);
}

/* ── Rank badge ─────────────────────────────────────────────── */
.badge-rank {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: .5rem .875rem;
  background: linear-gradient(135deg, rgba(220,38,38,.12), rgba(212,160,23,.08));
  border: 1px solid rgba(212,160,23,.35); border-radius: .5rem;
}
.badge-rank .rank-kanji {
  font-family: var(--font-display); font-size: 2rem;
  color: var(--accent-gold); line-height: 1; letter-spacing: .05em;
}
.badge-rank .rank-label {
  font-family: var(--font-body); font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-smoke); margin-top: .15rem;
}

/* ── Stat number ────────────────────────────────────────────── */
.stat-number {
  font-family: var(--font-mono); font-size: 2rem;
  font-weight: 700; color: var(--accent-gold); line-height: 1;
}

/* ── Progress bar ───────────────────────────────────────────── */
.progress-overkill {
  height: 6px; background: var(--bg-iron);
  border-radius: 999px; overflow: hidden;
}
.progress-overkill .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blood), var(--accent-gold));
  border-radius: 999px; transition: width .7s cubic-bezier(.4,0,.2,1);
}

/* ── Rarity badges ──────────────────────────────────────────── */
.rarity-common    { color: #9CA3AF; border-color: rgba(156,163,175,.3); background: rgba(156,163,175,.07); }
.rarity-rare      { color: #60A5FA; border-color: rgba(96,165,250,.3);  background: rgba(96,165,250,.07); }
.rarity-epic      { color: #A78BFA; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.rarity-legendary { color: var(--accent-gold); border-color: rgba(212,160,23,.4); background: rgba(212,160,23,.09); }

/* ── Font helpers ───────────────────────────────────────────── */
.font-display { font-family: var(--font-display) !important; }
.font-mono-ok { font-family: var(--font-mono) !important; }

/* ── Grain texture ──────────────────────────────────────────── */
.bg-grain { position: relative; }
.bg-grain::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  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='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 300px 300px; z-index: 0;
}
.bg-grain > * { position: relative; z-index: 1; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes pulse-blood {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%       { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.animate-fadeInUp    { animation: fadeInUp .5s ease both; }
.animate-fadeInDown  { animation: fadeInDown .5s ease both; }
.animate-slideInLeft { animation: slideInLeft .5s ease both; }

.anim-delay-1 { animation-delay: .08s; }
.anim-delay-2 { animation-delay: .16s; }
.anim-delay-3 { animation-delay: .24s; }
.anim-delay-4 { animation-delay: .32s; }
.anim-delay-5 { animation-delay: .40s; }
.anim-delay-6 { animation-delay: .48s; }
.anim-delay-7 { animation-delay: .56s; }
.anim-delay-8 { animation-delay: .64s; }

/* ── Achievement cards ──────────────────────────────────────── */
.achievement-card {
  border-radius: .75rem; padding: 1rem;
  border: 1px solid var(--bg-iron);
  background: var(--bg-obsidian);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.achievement-card.unlocked {
  border-color: rgba(212,160,23,.22);
}
.achievement-card.unlocked:hover {
  border-color: rgba(212,160,23,.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,160,23,.07);
}
.achievement-card.locked { opacity: .5; }
.achievement-card.locked .ach-icon {
  filter: grayscale(1) opacity(.3);
}

/* ── Landing page ───────────────────────────────────────────── */
.hero-logo {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: .88; letter-spacing: .04em;
  color: var(--text-ghost);
}
.hero-kanji {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--accent-gold); line-height: 1;
}
.stat-counter {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700; color: var(--text-ghost);
}

/* ── Rank widget ────────────────────────────────────────────── */
.rank-widget {
  background: linear-gradient(135deg, var(--bg-steel), var(--bg-obsidian));
  border: 1px solid rgba(212,160,23,.2);
  border-radius: .875rem; padding: 1rem 1.25rem;
  animation: fadeInUp .4s ease both;
}
.rank-widget .rank-kanji-big {
  font-family: var(--font-display);
  font-size: 3rem; color: var(--accent-gold);
  line-height: 1; letter-spacing: .05em;
  text-shadow: 0 0 20px rgba(212,160,23,.3);
}

/* ── Sidebar nav items — alta especificidad para sobrevivir Tailwind CDN ── */
.ok-nav-item,
#athlete-sidebar .ok-nav-item,
#coach-sidebar .ok-nav-item,
#admin-sidebar .ok-nav-item,
nav .ok-nav-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    margin-bottom: 2px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
.ok-nav-icon,
#athlete-sidebar .ok-nav-icon,
#coach-sidebar .ok-nav-icon,
#admin-sidebar .ok-nav-icon {
    display: inline-block !important;
    width: 20px !important;
    min-width: 20px !important;
    text-align: center !important;
    font-style: normal !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}