/* ═══════════════════════════════════════════════════════════════════
   La Mazmorra — Shared Design System v2
   Violet + Amber · Aurora BG · Cinzel headings · Inter body
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #06060f;
  --paper:     #06060f;
  --cream:     #0c0d1e;
  --surface:   #111226;
  --surface2:  #18192e;
  --ink:       #06060f;

  /* Text */
  --text:      #e8e4f4;
  --text2:     #5e6078;
  --text3:     #2a2c40;

  /* Violet (primary accent) */
  --violet:    #6c5ff5;
  --violet2:   #9d95fa;
  --violet-dim:rgba(108,95,245,.14);
  --violet-glow:rgba(108,95,245,.28);

  /* Gold/Amber (secondary accent) — maps to --gold for backward compat */
  --gold:      #d4940a;
  --gold2:     #f5c030;
  --gold-dim:  rgba(212,148,10,.14);
  --gold-glow: rgba(212,148,10,.26);

  /* Borders */
  --border:       rgba(255,255,255,.06);
  --border2:      rgba(255,255,255,.12);
  --border-gold:  rgba(212,148,10,.3);
  --border-violet:rgba(108,95,245,.32);

  /* Utility */
  --rust:    #d44040;
  --moss:    #2d9e5a;
  --shadow:  rgba(0,0,0,.75);
  --radius:  10px;
  --radius-lg: 16px;
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'DM Sans', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Aurora background ───────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 10% 15%,  rgba(108,95,245,.16) 0%, transparent 65%),
    radial-gradient(ellipse 60% 65% at 90% 90%,  rgba(212,148,10,.11) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 75% 25%,  rgba(108,95,245,.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 25% 80%,  rgba(212,148,10,.06) 0%, transparent 55%);
  animation: auroraShift 20s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0%   { transform: scale(1)    translate(0,    0);    opacity: 1;   }
  33%  { transform: scale(1.04) translate(1.5%, -1%);  opacity: .9;  }
  66%  { transform: scale(.97)  translate(-1%,  2%);   opacity: .95; }
  100% { transform: scale(1.02) translate(.5%,  .5%);  opacity: 1;   }
}

/* Dot grid overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(108,95,245,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(108,95,245,.6); }
::selection { background: rgba(108,95,245,.3); color: var(--violet2); }

/* ── Header ──────────────────────────────────────────────────────── */
header {
  background: rgba(6,6,15,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 0 2rem !important;
  display: flex !important; align-items: center !important; gap: .75rem !important;
  height: 64px !important;
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--border-violet), 0 4px 32px rgba(0,0,0,.5) !important;
}

/* Violet top line */
header::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--violet), var(--violet2), var(--gold2), var(--violet), transparent);
  opacity: .6;
  pointer-events: none;
}

.logo {
  font-family: 'Cinzel', 'Playfair Display', serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  text-decoration: none !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  transition: all .25s !important;
  flex-shrink: 0 !important;
}
.logo span { color: var(--violet2); }
.logo:hover { color: var(--violet2) !important; filter: drop-shadow(0 0 14px var(--violet-glow)); }

nav {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  gap: .1rem !important;
}
nav a {
  color: var(--text2) !important;
  text-decoration: none !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  padding: .38rem .65rem !important;
  border-radius: 6px !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  transition: color .18s, background .18s !important;
  white-space: nowrap !important;
  margin-left: 0 !important;
}
nav a:hover { color: var(--violet2) !important; background: var(--violet-dim) !important; }
nav a.active {
  color: var(--violet2) !important;
  background: var(--violet-dim) !important;
  box-shadow: inset 0 0 0 1px var(--border-violet) !important;
}

/* Nav toggle (mobile) */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
  margin-left: auto;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--text2); border-radius: 2px; transition: all .25s;
}

/* Dark toggle — oculto */
.dark-toggle { display: none !important; }

/* PWA install btn */
#pwa-install-btn {
  display: none; align-items: center; gap: .4rem;
  font-family: inherit; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--violet); color: #fff;
  border: none; border-radius: 6px; padding: .38rem .8rem;
  cursor: pointer; transition: opacity .15s;
}
#pwa-install-btn:hover { opacity: .85; }

/* ── Page Hero ───────────────────────────────────────────────────── */
.page-hero {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(108,95,245,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 50%, rgba(212,148,10,.07) 0%, transparent 50%),
    #06060f !important;
  padding: 2.75rem 2rem 2.25rem !important;
  position: relative !important; overflow: hidden !important;
  border-bottom: 1px solid var(--border-violet) !important;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(108,95,245,.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.page-hero h1 {
  font-family: 'Cinzel', 'Playfair Display', serif !important;
  font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
  font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  background: linear-gradient(135deg, var(--text) 0%, var(--violet2) 50%, var(--gold2) 100%) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  position: relative !important; z-index: 1 !important;
}
.page-hero p {
  color: var(--text2) !important; margin-top: .5rem !important; font-size: .9rem !important;
  font-style: italic !important; position: relative !important; z-index: 1 !important;
}

/* ── Cards — universal dark treatment ───────────────────────────── */
.card, .home-card, .match-card, .top-game-card,
.podium-slot, .wishlist-card, .profile-card {
  background: var(--cream) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.5) !important;
}

.card-head {
  background: transparent !important;
  border-bottom-color: var(--border) !important;
}
.card-head h3 { color: var(--text) !important; }
.card-head a { color: var(--violet2) !important; }
.card-head a:hover { color: var(--gold2) !important; }

/* ── Section titles ──────────────────────────────────────────────── */
.section-title, h2.section-title {
  font-family: 'Cinzel', 'Playfair Display', serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  display: flex; align-items: center; gap: 12px;
}
.section-title::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(to right, var(--border-violet), transparent);
}

/* ── Table ───────────────────────────────────────────────────────── */
table {
  background: var(--cream) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
th {
  background: var(--surface2) !important;
  color: var(--violet2) !important;
  border-bottom: 1px solid var(--border-violet) !important;
}
td { border-bottom-color: var(--border) !important; color: var(--text) !important; }
tr:hover td { background: var(--surface) !important; }

/* ── Forms ───────────────────────────────────────────────────────── */
select, input[type=text], input[type=search], input[type=date],
input[type=number], textarea {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
  border-radius: var(--radius) !important;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px rgba(108,95,245,.12) !important;
  outline: none !important;
}
select option { background: #111226; color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────────── */
button.btn-primary, a.btn-primary {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--violet), var(--violet2));
  color: #fff;
  border: none; border-radius: var(--radius);
  font-family: inherit; font-size: .82rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .55rem 1.2rem; cursor: pointer; text-decoration: none;
  transition: opacity .18s, transform .18s;
}
button.btn-primary:hover, a.btn-primary:hover { opacity: .88; transform: translateY(-1px); }

button.btn-gold, a.btn-gold {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #06060f;
  border: none; border-radius: var(--radius);
  font-family: inherit; font-size: .82rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .55rem 1.2rem; cursor: pointer; text-decoration: none;
  transition: opacity .18s, transform .18s;
}
button.btn-gold:hover, a.btn-gold:hover { opacity: .88; transform: translateY(-1px); }

/* ── Footer ──────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 2.5rem 1rem;
  font-size: .75rem;
  color: var(--text3);
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  background: var(--bg);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── Score pills ─────────────────────────────────────────────────── */
.score-pill {
  background: var(--surface) !important;
  color: var(--text) !important;
}
.score-pill.winner {
  background: var(--violet-dim) !important;
  color: var(--violet2) !important;
  border: 1px solid var(--border-violet) !important;
}

/* ── Toolbar / sticky filter bars ───────────────────────────────── */
.toolbar, .stats-bar {
  background: rgba(6,6,15,.9) !important;
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border) !important;
}

/* ── Empty messages ──────────────────────────────────────────────── */
.empty-msg, .empty { color: var(--text2) !important; }

/* ── Stats bar items ─────────────────────────────────────────────── */
.stat-item { border-right-color: var(--border) !important; }
.stat-val { color: var(--violet2) !important; }
.stat-lbl { color: var(--text2) !important; }

/* ── Podium ──────────────────────────────────────────────────────── */
.podium-slot {
  background: var(--cream) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.podium-slot:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
}
.podium-slot.rank-1 {
  border-bottom: 3px solid var(--gold2) !important;
  box-shadow: 0 0 24px rgba(212,148,10,.12) !important;
}
.podium-slot.rank-2 { border-bottom: 3px solid #9ca3af !important; }
.podium-slot.rank-3 { border-bottom: 3px solid #c47f3a !important; }
.podium-name { color: var(--text) !important; }
.podium-wins, .podium-stat { color: var(--text2) !important; }

/* ── Lightbox ────────────────────────────────────────────────────── */
.lightbox {
  background: rgba(0,0,0,.92) !important;
  backdrop-filter: blur(8px);
}

/* ── Game night banner ───────────────────────────────────────────── */
.gamenight-banner {
  background: linear-gradient(135deg, #080820, #0e0e28) !important;
  border-bottom: 1px solid var(--border-violet) !important;
}

/* ── Modals ──────────────────────────────────────────────────────── */
.modal-bg {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(8px);
}
.modal {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
}

/* ── Quick links (home) ──────────────────────────────────────────── */
.quick-link {
  background: var(--cream) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.quick-link:hover {
  background: var(--violet-dim) !important;
  color: var(--violet2) !important;
  border-color: var(--border-violet) !important;
}

/* ── Recent game rows ────────────────────────────────────────────── */
.recent-game-row:hover { background: var(--surface) !important; }
.recent-game-placeholder, .last-match-placeholder {
  background: var(--surface) !important;
}
.fav-game-bar { background: var(--surface2) !important; }

/* ── Match cards ─────────────────────────────────────────────────── */
.match-head {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
.match-row { background: var(--surface) !important; }
.match-row:hover { background: var(--surface2) !important; }
.streak-box { background: var(--surface) !important; }

/* ── Duel rows (jugador) ─────────────────────────────────────────── */
.duel-row { background: var(--surface) !important; }

/* ── Category tags / pills ───────────────────────────────────────── */
.cat-tag, .mech-tag {
  background: var(--surface) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px;
  font-size: .72rem; padding: .2rem .6rem;
}

/* ── Game cards (catalogo) ───────────────────────────────────────── */
.game-card {
  background: var(--cream) !important;
  border: 1px solid var(--border) !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.game-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 0 0 1px var(--border-violet) !important;
  border-color: var(--border-violet) !important;
}
.game-card-body { background: transparent !important; color: var(--text) !important; }
.game-card-title { color: var(--text) !important; }
.game-card-meta { color: var(--text2) !important; }

/* ── Mini podium ─────────────────────────────────────────────────── */
.mini-podium-slot {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.mini-podium-slot:hover {
  background: var(--surface2) !important;
  border-color: var(--border-violet) !important;
}
.mini-name { color: var(--text) !important; }
.mini-wins { color: var(--text2) !important; }

/* ── Badges / streak ─────────────────────────────────────────────── */
.streak-badge { background: rgba(212,68,64,.2) !important; color: #f08080 !important; }
.streak-badge.hot { background: var(--violet-dim) !important; color: var(--violet2) !important; }

/* ── Player hero (jugador.php) ───────────────────────────────────── */
.player-hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(108,95,245,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(212,148,10,.07) 0%, transparent 50%),
    #06060f !important;
  border-bottom-color: var(--border-violet) !important;
}
.player-name-big { color: var(--text) !important; }
.player-since { color: var(--text2) !important; }
.hero-stat-val { color: var(--violet2) !important; }
.hero-stat-lbl { color: #c0bedd !important; font-size: .72rem !important; letter-spacing: .12em !important; }
.hero-stat { border-right-color: var(--border) !important; }

/* ── Back link ───────────────────────────────────────────────────── */
.back-link { color: var(--text2) !important; }
.back-link:hover { color: var(--violet2) !important; }

/* ── Wishlist ────────────────────────────────────────────────────── */
.wishlist-section-title { color: var(--violet2) !important; }
.wish-row, .wish-card { background: var(--cream) !important; color: var(--text) !important; }
.wish-row:hover, .wish-card:hover { background: var(--surface2) !important; }

/* ── Graficas / charts ───────────────────────────────────────────── */
.chart-card {
  background: var(--cream) !important;
  border-color: var(--border) !important;
}

/* ── Admin ───────────────────────────────────────────────────────── */
.admin-panel { background: var(--cream) !important; }

/* ── Dice result popup ───────────────────────────────────────────── */
.dice-result {
  background: var(--surface) !important;
  border-color: var(--border-violet) !important;
}
.dice-result-num { color: var(--violet2) !important; }

/* ── Notification dot ────────────────────────────────────────────── */
.notif-dot {
  background: var(--rust) !important;
  box-shadow: 0 0 6px rgba(212,64,64,.5) !important;
}

/* ── Responsive nav ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  nav {
    display: none; flex-direction: column; align-items: flex-start;
    position: fixed; top: 64px; left: 0; right: 0;
    background: rgba(6,6,15,.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-violet);
    padding: 1rem 1.5rem 1.5rem; gap: .2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    z-index: 101;
  }
  nav.open { display: flex; }
  nav a { margin: 0; padding: .5rem .75rem; width: 100%; }
  header { padding: 0 1.25rem !important; }
}

@media (max-width: 480px) {
  .page-hero { padding: 2rem 1.25rem 1.75rem !important; }
  .page-hero h1 { font-size: 1.5rem !important; }
}