/* character.css — Personaje, sprites, fantasmas, glitch */

#character-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 280px;
  overflow: visible;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}

#player-sprite {
  height: 260px;
  width: auto;
  object-fit: contain;
  position: relative;
  z-index: 10;
  transform-origin: bottom center;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.7));
  transition: filter 0.4s ease;
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%,100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-5px) scale(1.01); }
}

#player-sprite.sprite-level1 { filter: drop-shadow(0 0 8px rgba(168,85,247,0.35)); }
#player-sprite.sprite-level2 { filter: drop-shadow(0 0 14px rgba(168,85,247,0.6)) drop-shadow(0 0 5px rgba(255,0,0,0.4)); }
#player-sprite.sprite-level3 { filter: drop-shadow(0 0 20px rgba(168,85,247,0.8)) drop-shadow(0 0 10px rgba(255,0,0,0.7)); }
#player-sprite.sprite-level4 { filter: drop-shadow(0 0 28px rgba(255,0,0,1)) drop-shadow(0 0 14px rgba(0,255,255,0.7)); }

#player-sprite.sprite-reaction { animation: react 0.4s ease forwards; }
@keyframes react {
  0%   { transform: translateX(0) scale(1); }
  25%  { transform: translateX(-10px) scale(0.96); }
  50%  { transform: translateX(10px) scale(1.04); }
  75%  { transform: translateX(-5px) scale(0.98); }
  100% { transform: translateX(0) scale(1); }
}

.glitch-active {
  animation: glitch-shake 0.25s infinite !important;
  filter: drop-shadow(2px 0 0 rgba(255,0,0,0.9)) drop-shadow(-2px 0 0 rgba(0,255,255,0.9)) drop-shadow(0 0 10px rgba(168,85,247,0.7)) !important;
}
@keyframes glitch-shake {
  0%   { transform: translate(0,0) skew(0deg); }
  15%  { transform: translate(-4px,1px) skew(-1deg); filter: hue-rotate(90deg); }
  30%  { transform: translate(4px,-1px) skew(1deg); }
  45%  { transform: translate(-3px,2px); filter: hue-rotate(180deg); }
  60%  { transform: translate(3px,-2px) skew(0.5deg); }
  75%  { transform: translate(-2px,1px); filter: hue-rotate(270deg); }
  90%  { transform: translate(2px,0) skew(-0.5deg); }
  100% { transform: translate(0,0); filter: hue-rotate(0deg); }
}

.ghost-sprite {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
  opacity: 0;
}
@keyframes ghost-pulse {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.75); }
  25%  { opacity:var(--ghost-opacity,0.15); transform:translate(calc(-50% + var(--drift-x,0px)), calc(-50% + var(--drift-y,0px))) scale(1.02); }
  50%  { opacity:var(--ghost-opacity,0.15); transform:translate(calc(-50% + var(--drift-x,0px)*-0.6), calc(-50% + var(--drift-y,0px)*-0.6)) scale(1); }
  75%  { opacity:var(--ghost-opacity,0.15); transform:translate(calc(-50% + var(--drift-x,0px)), calc(-50% + var(--drift-y,0px))) scale(0.98); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(0.75); }
}
.ghost-sprite.ghost-glitch {
  filter: drop-shadow(2px 0 rgba(255,0,100,0.8)) drop-shadow(-2px 0 rgba(0,255,200,0.8));
  animation: ghost-glitch-pulse var(--ghost-duration,1200ms) var(--ghost-delay,0ms) ease-in-out infinite !important;
}
@keyframes ghost-glitch-pulse {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.7); }
  20%  { opacity:var(--ghost-opacity,0.4); transform:translate(calc(-50% + var(--drift-x,0px)), calc(-50% + var(--drift-y,0px))) scale(1.1) skew(2deg); filter:hue-rotate(90deg); }
  40%  { opacity:calc(var(--ghost-opacity,0.4)*0.6); transform:translate(calc(-50% + var(--drift-x,0px)*-1), calc(-50%)) scale(0.9) skew(-2deg); filter:hue-rotate(180deg); }
  60%  { opacity:var(--ghost-opacity,0.4); transform:translate(calc(-50% + var(--drift-x,0px)), calc(-50% + var(--drift-y,0px))) scale(1.05); filter:hue-rotate(270deg); }
  80%  { opacity:calc(var(--ghost-opacity,0.4)*0.8); transform:translate(calc(-50%), calc(-50% + var(--drift-y,0px)*-1)) scale(0.95); filter:hue-rotate(360deg); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(0.7); }
}

@media (min-width: 768px) {
  #character-container { height: 340px; border-right: 2px solid rgba(204,51,51,0.2); }
  #player-sprite { height: 320px; }
}