:root {
  --clr-bg: #0b0f1a;
  --clr-comum: #22c55e;
  --clr-raro: #3b82f6;
  --clr-epico: #a855f7;
  --clr-lendario: #eab308;
}

body {
  font-family: 'Inter', sans-serif;
  background: radial-gradient(circle at top, #0f172a 0%, #020617 70%);
  min-height: 100vh;
}

.font-rpg {
  font-family: 'Cinzel', serif;
}

.card-glow {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

.loot-comum { border-color: var(--clr-comum); }
.loot-raro { border-color: var(--clr-raro); }
.loot-epico { border-color: var(--clr-epico); }
.loot-lendario { border-color: var(--clr-lendario); }

.bg-loot-comum { background: linear-gradient(135deg, #052e16, #14532d); }
.bg-loot-raro { background: linear-gradient(135deg, #0c1a3d, #1e3a8a); }
.bg-loot-epico { background: linear-gradient(135deg, #2e1065, #581c87); }
.bg-loot-lendario { background: linear-gradient(135deg, #422006, #92400e); }

.text-comum { color: var(--clr-comum); }
.text-raro { color: var(--clr-raro); }
.text-epico { color: var(--clr-epico); }
.text-lendario { color: var(--clr-lendario); }

.dice-spin {
  animation: spin 0.6s ease-in-out;
}
@keyframes spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

.chest-open {
  animation: chestPop 0.5s ease-out;
}
@keyframes chestPop {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #4c1d95; border-radius: 4px; }
::-webkit-scrollbar-track { background: #0f172a; }

.xp-bar-track {
  background: #1e293b;
  border-radius: 999px;
  overflow: hidden;
  height: 10px;
}
.xp-bar-fill {
  background: linear-gradient(90deg, #7c3aed, #c026d3);
  height: 100%;
  transition: width 0.6s ease;
}

.rank-1 { background: linear-gradient(135deg, rgba(234,179,8,0.15), transparent); border-color: #eab308; }
.rank-2 { background: linear-gradient(135deg, rgba(148,163,184,0.15), transparent); border-color: #94a3b8; }
.rank-3 { background: linear-gradient(135deg, rgba(217,119,6,0.15), transparent); border-color: #d97706; }