/* ===== EduFai · estilos premium fantasy-tech ===== */
:root {
  --brand: #a855f7;
  --brand2: #7c3aed;
  --glow: #c084fc;
  --gold: #fbbf24;
}

* { scrollbar-width: thin; scrollbar-color: #3b2a5a #15101f; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #15101f; }
*::-webkit-scrollbar-thumb { background: #3b2a5a; border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #5b3f86; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(168,85,247,0.12), transparent 55%),
    #0b0712;
}

/* Glow / neon helpers */
.text-glow { text-shadow: 0 0 14px rgba(192,132,252,0.55); }
.brand-gradient {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 45%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel-glow { box-shadow: 0 0 0 1px rgba(124,58,237,0.25), 0 16px 50px -20px rgba(124,58,237,0.55); }
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-4px); border-color: rgba(168,85,247,0.6);
  box-shadow: 0 18px 40px -18px rgba(168,85,247,0.6); }

.btn-brand {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 8px 24px -8px rgba(124,58,237,0.8);
  transition: filter .2s ease, transform .15s ease;
}
.btn-brand:hover { filter: brightness(1.12); }
.btn-brand:active { transform: scale(.98); }

/* ===== Acentos DORADOS (combinación oro + púrpura) ===== */
.gold-gradient {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gold-glow { color:#fbbf24; text-shadow: 0 0 14px rgba(251,191,36,.55); }
.btn-gold {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color:#3b2705; font-weight:700;
  box-shadow: 0 8px 24px -8px rgba(245,158,11,.8);
  transition: filter .2s ease, transform .15s ease;
}
.btn-gold:hover { filter: brightness(1.08); }
.btn-gold:active { transform: scale(.98); }
/* Botón mixto púrpura→oro para acentos premium */
.btn-royal {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #fbbf24 130%);
  box-shadow: 0 8px 26px -8px rgba(168,85,247,.8);
  transition: filter .2s ease, transform .15s ease;
}
.btn-royal:hover { filter: brightness(1.1); }
.gold-ring { box-shadow: 0 0 0 1px rgba(251,191,36,.45), 0 16px 50px -22px rgba(245,158,11,.55); }
.gold-border { border-color: rgba(251,191,36,.5) !important; }
.gold-divider { height:2px; background: linear-gradient(90deg, transparent, #fbbf24, transparent); }
.chip-gold { background: rgba(251,191,36,.14); color:#fbbf24; border:1px solid rgba(251,191,36,.35); }
/* Barra de progreso dorada (para conducta/calificaciones) */
.gold-fill { background: linear-gradient(90deg, #fde68a, #fbbf24, #f59e0b);
  height:100%; border-radius:999px; box-shadow:0 0 12px rgba(251,191,36,.6);
  transition: width .9s cubic-bezier(.22,1,.36,1); }

/* XP / progress bar */
.xp-track { background: #2c2142; border-radius: 999px; overflow: hidden; }
.xp-fill {
  background: linear-gradient(90deg, #c084fc, #a855f7, #7c3aed);
  height: 100%; border-radius: 999px;
  box-shadow: 0 0 12px rgba(192,132,252,0.7);
  transition: width .9s cubic-bezier(.22,1,.36,1);
}

/* Rarezas de items */
.rar-comun       { border-color:#475569; }
.rar-raro        { border-color:#3b82f6; box-shadow:0 0 14px -4px #3b82f6; }
.rar-epico       { border-color:#a855f7; box-shadow:0 0 16px -4px #a855f7; }
.rar-legendario  { border-color:#f59e0b; box-shadow:0 0 18px -4px #f59e0b; }
.rar-mitico      { border-color:#ef4444; box-shadow:0 0 22px -3px #ef4444;
                   background: linear-gradient(160deg, rgba(239,68,68,.10), transparent); }

/* Level-up overlay */
#levelup-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(124,58,237,.35), rgba(11,7,18,.92));
  backdrop-filter: blur(6px);
}
#levelup-overlay.show { display: flex; animation: fadeIn .3s ease; }
.levelup-card {
  text-align:center; animation: pop .6s cubic-bezier(.18,1.4,.4,1);
}
.levelup-ring {
  width:170px; height:170px; margin:0 auto 1.2rem;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron'; font-weight:900; font-size:3.4rem; color:#fff;
  background: conic-gradient(from 0deg, #c084fc, #a855f7, #7c3aed, #c084fc);
  box-shadow: 0 0 60px rgba(192,132,252,.8);
  animation: spin 3s linear infinite;
}
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes pop    { 0%{transform:scale(.4);opacity:0} 100%{transform:scale(1);opacity:1} }

/* Confetti */
.confetti {
  position: fixed; top:-10px; width:10px; height:14px; z-index:101;
  opacity:.9; animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity:0; }
}

.fade-in { animation: fadeUp .5s ease both; }
@keyframes fadeUp { from { opacity:0; transform: translateY(12px) } to { opacity:1; transform:none } }

/* Avatar stage */
.avatar-stage {
  background:
    radial-gradient(circle at 50% 30%, rgba(168,85,247,.25), transparent 60%),
    #120c1f;
  border: 1px solid #2c2142;
}