/* ============================================================
   CHAKRA IDLE BRASIL - Visual Effects System
   Injected globally on top of the React app
   ============================================================ */

/*  Drop notification  */
#nrmt-drops-container {
  position: fixed;
  bottom: 120px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  width: 260px;
}

.nrmt-drop-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(8,5,20,0.97), rgba(15,8,30,0.97));
  border-radius: 3px;
  border: 1px solid rgba(255,200,0,0.25);
  box-shadow:
    0 0 20px rgba(255,165,0,0.15),
    0 4px 20px rgba(0,0,0,0.6);
  animation: dropToastIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards,
             dropToastOut 0.4s ease-in forwards 3.5s;
  transform-origin: right center;
}

.nrmt-drop-toast.epic {
  border-color: rgba(180, 0, 255, 0.5);
  box-shadow: 0 0 30px rgba(180,0,255,0.2), 0 4px 20px rgba(0,0,0,0.6);
}
.nrmt-drop-toast.raro {
  border-color: rgba(0, 120, 255, 0.5);
  box-shadow: 0 0 25px rgba(0,120,255,0.2), 0 4px 20px rgba(0,0,0,0.6);
}
.nrmt-drop-toast.incomum {
  border-color: rgba(68, 204, 85, 0.4);
}

@keyframes dropToastIn {
  from { opacity: 0; transform: translateX(60px) scale(0.8); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes dropToastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

.drop-toast-icon {
  width: 36px; height: 36px;
  border-radius: 2px;
  background: rgba(255,200,0,0.1);
  border: 1px solid rgba(255,200,0,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.drop-toast-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.drop-toast-icon::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
}

.drop-toast-info { flex: 1; min-width: 0; }
.drop-toast-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #FFD700; opacity: 0.7; font-family: 'Rajdhani', sans-serif;
}
.drop-toast-name {
  font-size: 13px; font-weight: 700;
  color: #e8d5c0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-family: 'Rajdhani', sans-serif;
}
.drop-toast-qty {
  font-size: 11px; color: #FF6B00; font-weight: 600;
}

/*  Floating drop particles (sparkle burst)  */
.nrmt-drop-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  animation: sparkleFloat 1.2s ease-out forwards;
}
.nrmt-drop-sparkle::before,
.nrmt-drop-sparkle::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: sparkleExpand 1.2s ease-out forwards;
}
@keyframes sparkleFloat {
  0%   { transform: translate(0, 0) scale(0); opacity: 1; }
  60%  { opacity: 0.8; }
  100% { transform: translate(var(--tx, 0), var(--ty, -80px)) scale(1); opacity: 0; }
}
@keyframes sparkleExpand {
  0%   { width: 0; height: 0; }
  100% { width: 20px; height: 20px; }
}

/* Individual sparkle dots */
.nrmt-sparkle-dot {
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  animation: sparkleDot var(--dur, 0.8s) ease-out forwards;
}
@keyframes sparkleDot {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx,0), var(--ty,-60px)) scale(0); opacity: 0; }
}

/*  Hit / Damage number  */
#nrmt-combat-layer {
  position: fixed; inset: 0;
  z-index: 9998; pointer-events: none;
  overflow: hidden;
}

.nrmt-damage-number {
  position: absolute;
  font-family: 'Cinzel', 'Rajdhani', serif;
  font-weight: 900;
  pointer-events: none;
  white-space: nowrap;
  animation: damageFloat var(--dur, 1.5s) ease-out forwards;
  text-shadow: 0 0 10px currentColor, 1px 1px 0 rgba(0,0,0,0.8), -1px 1px 0 rgba(0,0,0,0.8);
  letter-spacing: 1px;
}

.nrmt-damage-number.physical {
  font-size: 22px; color: #FF4444;
  --tx: 10px; --ty: -70px;
}
.nrmt-damage-number.critical {
  font-size: 30px; color: #FFD700;
  --tx: 0px; --ty: -90px;
  animation: damageCrit var(--dur, 1.8s) ease-out forwards;
}
.nrmt-damage-number.heal {
  font-size: 20px; color: #44CC55;
  --tx: -10px; --ty: -65px;
}
.nrmt-damage-number.chakra {
  font-size: 18px; color: #00AAFF;
  --tx: 15px; --ty: -60px;
}
.nrmt-damage-number.exp {
  font-size: 16px; color: #AA88FF;
  --tx: 0; --ty: -80px;
}
.nrmt-damage-number.ryo {
  font-size: 16px; color: #FFD700;
  --tx: 5px; --ty: -70px;
}

@keyframes damageFloat {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 1; }
  20%  { transform: translate(calc(var(--tx)*0.3), calc(var(--ty)*0.3)) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--tx, 10px), var(--ty, -70px)) scale(0.8); opacity: 0; }
}
@keyframes damageCrit {
  0%   { transform: translate(0,0) scale(0); opacity: 1; }
  15%  { transform: translate(0, -20px) scale(1.5) rotate(-5deg); opacity: 1; }
  30%  { transform: translate(0, -30px) scale(1.2) rotate(3deg); }
  100% { transform: translate(0, -100px) scale(0.7); opacity: 0; }
}

/*  Hit flash on enemy  */
.nrmt-hit-flash {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: hitFlash 0.3s ease-out forwards;
  z-index: 100;
}
.nrmt-hit-flash.physical { background: rgba(255, 80, 80, 0.5); }
.nrmt-hit-flash.critical { background: rgba(255, 215, 0, 0.7); }
.nrmt-hit-flash.chakra   { background: rgba(0, 170, 255, 0.4); }

@keyframes hitFlash {
  0%   { opacity: 1; }
  50%  { opacity: 0.8; }
  100% { opacity: 0; }
}

/*  Screen shake  */
.nrmt-shake {
  animation: screenShake 0.4s ease-out !important;
}
@keyframes screenShake {
  0%  { transform: translate(0, 0); }
  10% { transform: translate(-3px, 2px); }
  20% { transform: translate(3px, -2px); }
  30% { transform: translate(-2px, 3px); }
  40% { transform: translate(2px, -1px); }
  50% { transform: translate(-1px, 2px); }
  60% { transform: translate(1px, -2px); }
  70% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -1px); }
  90% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

/*  Level up banner  */
.nrmt-levelup-banner {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 10001;
  text-align: center;
  pointer-events: none;
  animation: levelUpBanner 3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.nrmt-levelup-banner .levelup-text {
  font-family: 'Cinzel', serif;
  font-size: 36px; font-weight: 900;
  background: linear-gradient(135deg, #FFD700, #FF6B00, #FFD700);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(255,200,0,0.8));
  letter-spacing: 4px;
  animation: levelUpGradient 1s linear infinite;
}
.nrmt-levelup-banner .levelup-level {
  font-family: 'Cinzel', serif;
  font-size: 18px; color: #fff;
  letter-spacing: 3px;
  margin-top: 8px;
  opacity: 0.8;
}
@keyframes levelUpBanner {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  15%  { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  25%  { transform: translate(-50%,-50%) scale(0.95); }
  35%  { transform: translate(-50%,-50%) scale(1); }
  70%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-60%) scale(0.9); opacity: 0; }
}
@keyframes levelUpGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Rays behind level up */
.nrmt-levelup-rays {
  position: fixed;
  top: 50%; left: 50%;
  width: 0; height: 0;
  z-index: 10000;
  pointer-events: none;
}
.nrmt-levelup-rays::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  top: -300px; left: -300px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,200,0,0.08) 10deg, transparent 20deg,
    transparent 30deg, rgba(255,200,0,0.08) 40deg, transparent 50deg,
    transparent 60deg, rgba(255,200,0,0.08) 70deg, transparent 80deg,
    transparent 90deg, rgba(255,200,0,0.08) 100deg, transparent 110deg,
    transparent 120deg, rgba(255,200,0,0.08) 130deg, transparent 140deg,
    transparent 150deg, rgba(255,200,0,0.08) 160deg, transparent 170deg,
    transparent 180deg, rgba(255,200,0,0.08) 190deg, transparent 200deg,
    transparent 210deg, rgba(255,200,0,0.08) 220deg, transparent 230deg,
    transparent 240deg, rgba(255,200,0,0.08) 250deg, transparent 260deg,
    transparent 270deg, rgba(255,200,0,0.08) 280deg, transparent 290deg,
    transparent 300deg, rgba(255,200,0,0.08) 310deg, transparent 320deg,
    transparent 330deg, rgba(255,200,0,0.08) 340deg, transparent 350deg,
    transparent 360deg
  );
  animation: raysRotate 4s linear infinite, raysIn 0.3s ease-out, raysOut 0.8s ease-in 2.2s forwards;
  border-radius: 50%;
}
@keyframes raysRotate { to { transform: rotate(360deg); } }
@keyframes raysIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes raysOut { to { opacity: 0; transform: scale(1.5); } }

/*  Ryo gain popup (bottom-center)  */
.nrmt-ryo-popup {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999; pointer-events: none;
  background: linear-gradient(135deg, rgba(8,5,20,0.95), rgba(15,8,30,0.95));
  border: 1px solid rgba(255,200,0,0.4);
  border-radius: 20px;
  padding: 8px 20px;
  font-family: 'Cinzel', serif;
  font-size: 16px; font-weight: 700;
  color: #FFD700;
  box-shadow: 0 0 20px rgba(255,200,0,0.3);
  animation: ryoPopup 2s ease-out forwards;
  white-space: nowrap;
}
@keyframes ryoPopup {
  0%   { transform: translateX(-50%) translateY(20px); opacity: 0; }
  15%  { transform: translateX(-50%) translateY(0); opacity: 1; }
  70%  { transform: translateX(-50%) translateY(-10px); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-30px); opacity: 0; }
}

/* Anuncio cinematografico de drop raro e novo ninja */
.nrmt-acquisition{--acq:#4c9dff;position:fixed;z-index:1005000;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none;opacity:0;background:radial-gradient(circle at center,#07101ad9 0,#020305b8 35%,#0000 72%);transition:opacity .28s ease}
.nrmt-acquisition.is-visible{opacity:1}.nrmt-acquisition.is-leaving{opacity:0;transition-duration:.6s}
.nrmt-acquisition--epic{--acq:#ca5cff}.nrmt-acquisition--legendary{--acq:#ffd34f}.nrmt-acquisition--mythic{--acq:#ff5a72}.nrmt-acquisition--uncommon{--acq:#62db7b}
.nrmt-acquisition__aura{position:absolute;width:min(720px,80vw);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,#0000 0 8deg,color-mix(in srgb,var(--acq) 19%,transparent) 9deg 12deg,#0000 13deg 24deg);filter:blur(1px) drop-shadow(0 0 25px var(--acq));animation:nrmtAcqAura 9s linear infinite}
.nrmt-acquisition__aura:after{content:"";position:absolute;inset:25%;border:2px solid var(--acq);border-radius:50%;box-shadow:0 0 25px var(--acq),inset 0 0 25px var(--acq);opacity:.42;animation:nrmtAcqRing 1.8s ease-out infinite}
.nrmt-acquisition__particles{position:absolute;left:50%;top:50%}.nrmt-acquisition__particles i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 7px 2px var(--acq);animation:nrmtAcqParticle 1.7s var(--delay) ease-out infinite;transform:rotate(var(--a)) translateX(42px)}
.nrmt-acquisition__card{position:relative;width:min(530px,88vw);display:flex;flex-direction:column;align-items:center;padding:24px 28px 20px;text-align:center;color:#fff;transform:scale(.55) translateY(35px);opacity:0;filter:drop-shadow(0 18px 32px #000);animation:nrmtAcqCard .7s .08s cubic-bezier(.18,.85,.25,1.25) forwards}
.nrmt-acquisition__card:before,.nrmt-acquisition__card:after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--acq),#fff,var(--acq),transparent);box-shadow:0 0 15px var(--acq)}.nrmt-acquisition__card:before{top:46px}.nrmt-acquisition__card:after{bottom:9px}
.nrmt-acquisition__card small{z-index:1;margin-bottom:10px;color:var(--acq);font:900 12px Cinzel,Georgia,serif;letter-spacing:.32em;text-shadow:0 0 18px var(--acq)}
.nrmt-acquisition__frame{z-index:1;width:105px;height:105px;display:grid;place-items:center;margin:8px;border:2px solid var(--acq);border-radius:50%;background:radial-gradient(circle,#ffffff19,#07090ded 67%);box-shadow:0 0 0 7px #0009,0 0 0 9px color-mix(in srgb,var(--acq) 45%,transparent),0 0 42px var(--acq);animation:nrmtAcqFrame 1.8s ease-in-out infinite}
.nrmt-acquisition__frame img{width:82px;height:82px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 5px 5px #000)}.nrmt-acquisition__frame b{color:#fff;font-size:48px;text-shadow:0 0 20px var(--acq)}
.nrmt-acquisition__card h2{z-index:1;max-width:100%;margin:10px 0 2px;overflow:hidden;color:#fff;font:900 clamp(22px,3vw,34px) Cinzel,Georgia,serif;letter-spacing:.04em;text-overflow:ellipsis;text-shadow:0 2px 0 #000,0 0 20px var(--acq);white-space:nowrap}
.nrmt-acquisition__card strong{z-index:1;color:var(--acq);font:900 12px Rajdhani,Arial,sans-serif;letter-spacing:.38em;text-shadow:0 0 12px var(--acq)}
.nrmt-acquisition__card p{z-index:1;margin:8px 0 0;color:#d9dde1;font:600 11px Rajdhani,Arial,sans-serif;letter-spacing:.08em}
@keyframes nrmtAcqAura{to{transform:rotate(360deg)}}@keyframes nrmtAcqRing{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.35);opacity:0}}@keyframes nrmtAcqParticle{0%{opacity:0;transform:rotate(var(--a)) translateX(40px) scale(.2)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(1.3)}}@keyframes nrmtAcqCard{to{transform:none;opacity:1}}@keyframes nrmtAcqFrame{50%{transform:translateY(-5px) scale(1.04);box-shadow:0 0 0 7px #0009,0 0 0 9px color-mix(in srgb,var(--acq) 65%,transparent),0 0 58px var(--acq)}}
@media(prefers-reduced-motion:reduce){.nrmt-acquisition *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/*  Jutsu name flash  */
.nrmt-jutsu-flash {
  position: fixed;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%) scaleX(0);
  z-index: 10001; pointer-events: none;
  font-family: 'Cinzel', serif;
  font-size: 24px; font-weight: 900;
  letter-spacing: 6px; text-transform: uppercase;
  padding: 12px 40px;
  background: linear-gradient(90deg, transparent, rgba(8,5,20,0.9), rgba(8,5,20,0.9), transparent);
  border-top: 1px solid rgba(255,107,0,0.4);
  border-bottom: 1px solid rgba(255,107,0,0.4);
  animation: jutsuFlash 2.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
  white-space: nowrap;
}
@keyframes jutsuFlash {
  0%   { transform: translate(-50%,-50%) scaleX(0); opacity: 0; }
  20%  { transform: translate(-50%,-50%) scaleX(1); opacity: 1; }
  70%  { transform: translate(-50%,-50%) scaleX(1); opacity: 1; }
  100% { transform: translate(-50%,-60%) scaleX(0.8); opacity: 0; }
}