/* ============================================================
   ACADEMIA DE CRACKS · Level Up / XP Celebration Screen
   ============================================================ */

.lu-screen {
  background: var(--carbon);
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.lu-screen::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(30, 155, 255,0.3), transparent 60%);
  animation: luBg 2s ease-in-out infinite;
}
@keyframes luBg { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Rotating rays */
.lu-rays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lu-rays .ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px;
  height: 60%;
  background: linear-gradient(to top, transparent, rgba(30, 155, 255,0.4), transparent);
  transform-origin: 50% 100%;
}
.lu-rays .ray:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.lu-rays .ray:nth-child(2) { transform: translate(-50%, -100%) rotate(45deg); }
.lu-rays .ray:nth-child(3) { transform: translate(-50%, -100%) rotate(90deg); }
.lu-rays .ray:nth-child(4) { transform: translate(-50%, -100%) rotate(135deg); }
.lu-rays .ray:nth-child(5) { transform: translate(-50%, -100%) rotate(180deg); }
.lu-rays .ray:nth-child(6) { transform: translate(-50%, -100%) rotate(225deg); }
.lu-rays .ray:nth-child(7) { transform: translate(-50%, -100%) rotate(270deg); }
.lu-rays .ray:nth-child(8) { transform: translate(-50%, -100%) rotate(315deg); }
.lu-rays { animation: rayspin 12s linear infinite; }
@keyframes rayspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Content */
.lu-content { position: relative; z-index: 2; text-align: center; padding: 32px 24px; }
.lu-tag {
  display: inline-block;
  padding: 6px 14px;
  background: var(--neon);
  color: var(--carbon);
  border-radius: 100px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 18px;
}
.lu-xp {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  color: var(--neon);
  font-size: 76px;
  line-height: 0.9;
  text-shadow: 0 0 40px var(--neon-glow);
  margin-bottom: 4px;
  animation: luPop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes luPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.lu-xp-label { font-family: 'Chakra Petch', sans-serif; font-size: 14px; color: var(--smoke); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 28px; }
.lu-overall { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 28px; }
.lu-overall .ov-block { text-align: center; }
.lu-overall .ov-num { font-family: 'Chakra Petch', sans-serif; font-size: 48px; font-weight: 700; line-height: 1; }
.lu-overall .ov-num.before { color: var(--smoke-dim); }
.lu-overall .ov-num.after  { color: var(--neon); text-shadow: 0 0 20px var(--neon-glow); }
.lu-overall .ov-label { font-family: 'Chakra Petch', sans-serif; font-size: 10px; color: var(--smoke-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }
.lu-overall .arrow { color: var(--neon); font-size: 28px; }
.lu-stats-pop { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--glass-border-hi); border-radius: 18px; padding: 18px; margin: 0 auto 24px; max-width: 320px; }
.lu-stats-pop h4 { font-family: 'Chakra Petch', sans-serif; font-size: 11px; color: var(--smoke-dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 14px; }
.lu-stat-line { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-family: 'Chakra Petch', sans-serif; }
.lu-stat-line .ls-key { color: var(--smoke); font-size: 13px; font-weight: 600; }
.lu-stat-line .ls-prog { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.lu-stat-line .ls-prog .from { color: var(--smoke-dim); }
.lu-stat-line .ls-prog .to   { color: var(--neon); font-weight: 700; }
.lu-next-mission { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px; text-align: left; margin: 0 auto 18px; max-width: 320px; display: flex; align-items: center; gap: 12px; }
.lu-next-mission .lu-nm-icon { width: 40px; height: 40px; background: var(--carbon-3); border-radius: 10px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.lu-next-mission .lu-nm-info { flex: 1; }
.lu-next-mission .lu-nm-label { font-family: 'Chakra Petch', sans-serif; font-size: 9px; color: var(--smoke-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 2px; }
.lu-next-mission .lu-nm-info h5 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.lu-next-mission .lu-nm-info p  { font-size: 11px; color: var(--smoke-dim); font-family: 'Chakra Petch', sans-serif; }
.lu-cta { max-width: 320px; margin: 0 auto; }