/* CSS 3D Roblox-style Character System */

.roblox-char {
  perspective: 400px;
  width: 60px;
  height: 100px;
  position: relative;
  margin: 0 auto;
  cursor: pointer;
}
.roblox-char:hover .char-body { transform: rotateY(-20deg); }

.char-body {
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(-15deg);
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}

/* Cube builder helpers */
.cube { transform-style: preserve-3d; position: absolute; }
.cube .face {
  position: absolute;
  backface-visibility: hidden;
}
.cube .face-front  { transform: translateZ(calc(var(--d)/2)); }
.cube .face-back   { transform: rotateY(180deg) translateZ(calc(var(--d)/2)); }
.cube .face-left   { transform: rotateY(-90deg) translateZ(calc(var(--w)/2)); }
.cube .face-right  { transform: rotateY(90deg) translateZ(calc(var(--w)/2)); }
.cube .face-top    { transform: rotateX(90deg) translateZ(calc(var(--h)/2)); }
.cube .face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h)/2)); }

/* HEAD */
.char-head {
  --w: 24px; --h: 24px; --d: 24px;
  width: var(--w); height: var(--h);
  left: 50%; top: 0;
  transform: translateX(-50%);
}
.char-head .face {
  width: var(--w); height: var(--h);
  border-radius: 3px;
}
.char-head .face-front { background: var(--skin); }
.char-head .face-back  { background: var(--skin-dark); }
.char-head .face-left  { width: var(--d); background: var(--skin-side); }
.char-head .face-right { width: var(--d); background: var(--skin-side); }
.char-head .face-top   { width: var(--w); height: var(--d); background: var(--skin-light); }
.char-head .face-bottom{ width: var(--w); height: var(--d); background: var(--skin-dark); }

/* Face features (on front face) */
.char-face {
  position: absolute;
  width: var(--w); height: var(--h);
  transform: translateZ(calc(var(--d)/2 + 0.5px));
  z-index: 2;
}
.char-eye {
  position: absolute;
  width: 5px; height: 5px;
  background: #1a1a2e;
  border-radius: 50%;
  top: 9px;
}
.char-eye::after {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  top: 1px; left: 2px;
}
.char-eye.left  { left: 5px; }
.char-eye.right { left: 14px; }
.char-mouth {
  position: absolute;
  width: 8px; height: 3px;
  border-bottom: 2px solid #2a1a0a;
  border-radius: 0 0 4px 4px;
  top: 16px; left: 8px;
}
.char-nose {
  position: absolute;
  width: 3px; height: 2px;
  background: var(--skin-dark);
  border-radius: 1px;
  top: 13px; left: 10px;
}

/* TORSO */
.char-torso {
  --w: 24px; --h: 22px; --d: 12px;
  width: var(--w); height: var(--h);
  left: 50%; top: 26px;
  transform: translateX(-50%);
}
.char-torso .face {
  width: var(--w); height: var(--h);
  border-radius: 2px;
}
.char-torso .face-front { background: var(--shirt); }
.char-torso .face-back  { background: var(--shirt-dark); }
.char-torso .face-left  { width: var(--d); background: var(--shirt-side); }
.char-torso .face-right { width: var(--d); background: var(--shirt-side); }
.char-torso .face-top   { width: var(--w); height: var(--d); background: var(--shirt-light); }
.char-torso .face-bottom{ width: var(--w); height: var(--d); background: var(--shirt-dark); }

/* Shirt detail */
.char-collar {
  position: absolute;
  width: 10px; height: 5px;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  border-left: 1px solid rgba(0,0,0,0.05);
  border-right: 1px solid rgba(0,0,0,0.05);
  top: 0; left: 7px;
  transform: translateZ(calc(var(--d)/2 + 0.5px));
}

/* ARMS */
.char-arm {
  --w: 8px; --h: 22px; --d: 8px;
  width: var(--w); height: var(--h);
  top: 26px;
  transform-origin: 50% 0%;
}
.char-arm .face {
  width: var(--w); height: var(--h);
  border-radius: 2px;
}
.char-arm.left  { left: -2px; }
.char-arm.right { right: -2px; }

.char-arm .face-front { background: var(--shirt); }
.char-arm .face-back  { background: var(--shirt-dark); }
.char-arm .face-left  { width: var(--d); background: var(--shirt-side); }
.char-arm .face-right { width: var(--d); background: var(--shirt-side); }
.char-arm .face-top   { width: var(--w); height: var(--d); background: var(--shirt-light); border-radius: 50%; }
.char-arm .face-bottom{ width: var(--w); height: var(--d); background: var(--skin); border-radius: 50%; }

/* LEGS */
.char-leg {
  --w: 10px; --h: 24px; --d: 10px;
  width: var(--w); height: var(--h);
  top: 50px;
  transform-origin: 50% 0%;
}
.char-leg .face {
  width: var(--w); height: var(--h);
  border-radius: 2px;
}
.char-leg.left  { left: 10px; }
.char-leg.right { left: 26px; }

.char-leg .face-front { background: var(--pants); }
.char-leg .face-back  { background: var(--pants-dark); }
.char-leg .face-left  { width: var(--d); background: var(--pants-side); }
.char-leg .face-right { width: var(--d); background: var(--pants-side); }
.char-leg .face-top   { width: var(--w); height: var(--d); background: var(--pants); }
.char-leg .face-bottom{ width: var(--w); height: var(--d); background: #333; border-radius: 2px; } /* shoes */

/* Idle animation */
.char-idle .char-body { animation: charIdle 3s ease-in-out infinite; }
.char-idle .char-arm.left  { animation: armSwingL 3s ease-in-out infinite; }
.char-idle .char-arm.right { animation: armSwingR 3s ease-in-out infinite; }
@keyframes charIdle { 0%,100%{transform:rotateX(-5deg) rotateY(-15deg) translateY(0)}50%{transform:rotateX(-5deg) rotateY(-15deg) translateY(-3px)} }
@keyframes armSwingL { 0%,100%{transform:rotateX(3deg)}50%{transform:rotateX(-3deg)} }
@keyframes armSwingR { 0%,100%{transform:rotateX(-3deg)}50%{transform:rotateX(3deg)} }

/* Attack animation */
.char-attacking .char-body { animation: charAttack 0.5s ease; }
@keyframes charAttack { 0%{transform:rotateX(-5deg) rotateY(-15deg)}40%{transform:rotateX(-5deg) rotateY(-25deg) translateX(10px) scale(1.05)}100%{transform:rotateX(-5deg) rotateY(-15deg)} }

/* Hit animation */
.char-hit .char-body { animation: charHit 0.5s ease; }
@keyframes charHit { 0%{transform:rotateX(-5deg) rotateY(-15deg)}15%{transform:rotateX(-5deg) rotateY(-5deg) translateX(-6px)}30%{transform:rotateX(-5deg) rotateY(-20deg) translateX(4px)}100%{transform:rotateX(-5deg) rotateY(-15deg)} }

/* Walk animation */
.char-walking .char-leg.left  { animation: legWalkL 0.6s ease-in-out infinite; }
.char-walking .char-leg.right { animation: legWalkR 0.6s ease-in-out infinite; }
.char-walking .char-arm.left  { animation: armWalkL 0.6s ease-in-out infinite; }
.char-walking .char-arm.right { animation: armWalkR 0.6s ease-in-out infinite; }
@keyframes legWalkL { 0%,100%{transform:rotateX(20deg)}50%{transform:rotateX(-20deg)} }
@keyframes legWalkR { 0%,100%{transform:rotateX(-20deg)}50%{transform:rotateX(20deg)} }
@keyframes armWalkL { 0%,100%{transform:rotateX(-15deg)}50%{transform:rotateX(15deg)} }
@keyframes armWalkR { 0%,100%{transform:rotateX(15deg)}50%{transform:rotateX(-15deg)} }

/* Shadow under character */
.char-shadow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 6px;
  background: rgba(0,0,0,0.12);
  border-radius: 50%;
  filter: blur(2px);
}

/* Zombie variant */
.roblox-char.zombie .char-head .face-front { background: #7a9a5a; }
.roblox-char.zombie .char-head .face-back  { background: #5a7a3a; }
.roblox-char.zombie .char-head .face-left,
.roblox-char.zombie .char-head .face-right { background: #6a8a4a; }
.roblox-char.zombie .char-head .face-top   { background: #8aaa6a; }

.roblox-char.zombie .char-eye {
  background: #111;
  box-shadow: 0 0 4px #ff2222, 0 0 8px rgba(255,0,0,0.5);
}
.roblox-char.zombie .char-eye::after {
  background: #ff3333;
  width: 3px; height: 3px;
  top: 1px; left: 1px;
}
.roblox-char.zombie .char-mouth {
  border-bottom: none;
  width: 12px; height: 4px;
  top: 16px; left: 6px;
  /* zigzag teeth */
  background: repeating-linear-gradient(90deg, #e8e0d0 0px, #e8e0d0 2px, transparent 2px, transparent 4px);
  border-top: 1px solid #2a1a0a;
  border-bottom: 1px solid #2a1a0a;
}

.roblox-char.zombie .char-torso .face-front { background: #4a3a3a; }
.roblox-char.zombie .char-torso .face-back  { background: #3a2a2a; }
.roblox-char.zombie .char-torso .face-left,
.roblox-char.zombie .char-torso .face-right { background: #443333; }

.roblox-char.zombie .char-arm .face-front { background: #7a9a5a; }
.roblox-char.zombie .char-arm .face-back  { background: #5a7a3a; }
.roblox-char.zombie .char-arm .face-left,
.roblox-char.zombie .char-arm .face-right { background: #6a8a4a; }

.roblox-char.zombie .char-leg .face-front { background: #3a3a2a; }
.roblox-char.zombie .char-leg .face-back  { background: #2a2a1a; }
.roblox-char.zombie .char-leg .face-left,
.roblox-char.zombie .char-leg .face-right { background: #333322; }
.roblox-char.zombie .char-leg .face-bottom { background: #1a2a1a; }

/* Damage states */
.char-dmg-1 .char-body { filter: brightness(0.95); }
.char-dmg-1 .char-face .bruise { display: block; }
.char-dmg-2 .char-body { filter: brightness(0.9); }
.char-dmg-2 .char-mouth { border-bottom-color: transparent; border-top: 2px solid #2a1a0a; border-radius: 0; }
.char-dmg-3 .char-body { filter: brightness(0.85); transform: rotateX(-5deg) rotateY(-15deg) rotate(3deg) !important; }
.char-dmg-3 .char-eye::after { display: none; }

/* Zombie damage */
.roblox-char.zombie.char-dmg-1 { opacity: 0.9; }
.roblox-char.zombie.char-dmg-2 { opacity: 0.75; }
.roblox-char.zombie.char-dmg-2 .char-eye { box-shadow: 0 0 2px #ff2222; }
.roblox-char.zombie.char-dmg-3 { opacity: 0.6; }
.roblox-char.zombie.char-dmg-3 .char-body { transform: rotateX(-5deg) rotateY(-15deg) rotate(-5deg) !important; }

/* Accessory overlays */
.char-accessory {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  line-height: 1;
}
.char-acc-helmet { top: -6px; left: 50%; transform: translateX(-50%); font-size: 18px; z-index: 11; }
.char-acc-weapon { right: -16px; top: 30px; font-size: 20px; transform: rotate(-30deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); z-index: 12; }
.char-acc-glasses { top: 7px; left: 50%; transform: translateX(-50%) translateZ(13px); font-size: 10px; z-index: 11; }
.char-acc-vest { top: 28px; left: 50%; transform: translateX(-50%); font-size: 14px; z-index: 8; }
.char-acc-effect { position: absolute; inset: -8px; z-index: 13; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0.8; }
.char-label { font-family: 'Fredoka', sans-serif; font-size: 0.5rem; font-weight: 700; color: var(--text-dim, #6B7280); text-align: center; margin-top: 4px; }

/* Effect animations */
.fx-fire .char-acc-effect { animation: fxFlicker 0.3s ease infinite alternate; }
@keyframes fxFlicker { from{opacity:0.6;transform:scale(0.95)}to{opacity:1;transform:scale(1.05)} }
.fx-lightning .char-acc-effect { animation: fxZap 0.5s ease infinite; }
@keyframes fxZap { 0%,100%{opacity:1}50%{opacity:0.3} }
.fx-rainbow .char-acc-effect { animation: fxRainbow 2s linear infinite; }
@keyframes fxRainbow { 0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)} }
.fx-ghost .char-acc-effect { animation: fxGhost 1.5s ease infinite; }
@keyframes fxGhost { 0%,100%{opacity:0.3}50%{opacity:0.8} }

/* Attack projectile */
.attack-projectile {
  position: fixed; z-index: 999;
  font-size: 1.8rem;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255,200,0,0.6));
}
.attack-projectile.player-attack { animation: projRight 0.6s ease-in forwards; }
.attack-projectile.enemy-attack  { animation: projLeft 0.6s ease-in forwards; }
@keyframes projRight { 0%{transform:translateX(0) scale(1);opacity:1}80%{transform:translateX(var(--dist)) scale(1.3);opacity:1}100%{transform:translateX(var(--dist)) scale(2);opacity:0} }
@keyframes projLeft  { 0%{transform:translateX(0) scale(1);opacity:1}80%{transform:translateX(calc(var(--dist) * -1)) scale(1.3);opacity:1}100%{transform:translateX(calc(var(--dist) * -1)) scale(2);opacity:0} }

/* Responsive */
.roblox-char.char-sm { width: 45px; height: 75px; }
.roblox-char.char-sm .char-head { --w: 18px; --h: 18px; --d: 18px; }
.roblox-char.char-sm .char-torso { --w: 18px; --h: 16px; --d: 9px; top: 20px; }
.roblox-char.char-sm .char-arm { --w: 6px; --h: 16px; --d: 6px; top: 20px; }
.roblox-char.char-sm .char-leg { --w: 8px; --h: 18px; --d: 8px; top: 38px; }
.roblox-char.char-sm .char-leg.left { left: 7px; }
.roblox-char.char-sm .char-leg.right { left: 20px; }
.roblox-char.char-sm .char-eye { width: 4px; height: 4px; top: 6px; }
.roblox-char.char-sm .char-eye.left { left: 3px; }
.roblox-char.char-sm .char-eye.right { left: 11px; }
.roblox-char.char-sm .char-mouth { top: 12px; left: 5px; width: 6px; }