/* ============================================================
   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 de drop raro e novo ninja — banner compacto centralizado no topo
   (era um reveal cinematografico ocupando a tela inteira com vinheta,
   aura giratoria de 720px e 26 particulas; pedido do dono do jogo pra
   deixar menor e no topo, sem tomar conta da tela durante a hunt). */
.nrmt-acquisition{--acq:#4c9dff;position:fixed;z-index:1005000;top:14px;left:50%;transform:translateX(-50%);pointer-events:none;opacity:0;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,.nrmt-acquisition__particles{display:none}
.nrmt-acquisition__card{position:relative;width:max-content;max-width:min(320px,86vw);display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;column-gap:10px;padding:7px 16px 7px 7px;text-align:left;color:#fff;background:linear-gradient(135deg,rgba(8,5,20,.95),rgba(15,8,30,.95));border:1px solid var(--acq);border-radius:12px;box-shadow:0 0 16px color-mix(in srgb,var(--acq) 45%,transparent),0 8px 18px #000a;transform:translateY(-14px);filter:drop-shadow(0 6px 10px #0009);animation:nrmtAcqCard .32s .04s cubic-bezier(.2,.8,.3,1) forwards}
.nrmt-acquisition__frame{z-index:1;grid-column:1;grid-row:1/4;width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--acq);border-radius:50%;background:radial-gradient(circle,#ffffff19,#07090ded 67%);box-shadow:0 0 0 3px #0009,0 0 16px var(--acq)}
.nrmt-acquisition__frame img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 3px #000)}.nrmt-acquisition__frame b{color:#fff;font-size:18px;text-shadow:0 0 10px var(--acq)}
.nrmt-acquisition__card small{z-index:1;grid-column:2;grid-row:1;color:var(--acq);font:900 8px Cinzel,Georgia,serif;letter-spacing:.2em;text-shadow:0 0 10px var(--acq)}
.nrmt-acquisition__card h2{z-index:1;grid-column:2;grid-row:2;max-width:190px;margin:0;overflow:hidden;color:#fff;font:900 14px Cinzel,Georgia,serif;letter-spacing:.02em;text-overflow:ellipsis;text-shadow:0 1px 0 #000,0 0 12px var(--acq);white-space:nowrap}
.nrmt-acquisition__card strong{z-index:1;grid-column:2;grid-row:3;color:var(--acq);font:900 8px Rajdhani,Arial,sans-serif;letter-spacing:.24em;text-shadow:0 0 8px var(--acq)}
.nrmt-acquisition__card p{display:none}
@keyframes nrmtAcqCard{to{transform:translateY(0)}}
@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; }
}