/* ============================================
   ALEX ARM FORMAT (3px wide instead of 4px)
   Skin format: 128x128
   1 skin pixel = 6.25px (at background-size 800px)
   Apply class "alex" to .container_skinviewer
   ============================================ */

/*
   Coordinate reference (128x128 skin):
   
   RIGHT ARM (slim):
   Right side: x=80, y=40, w=8, h=24  (4px×12px at 2x)
   Front:      x=88, y=40, w=6, h=24  (3px×12px at 2x)
   Left side:  x=94, y=40, w=8, h=24  (4px×12px at 2x)
   Back:       x=102,y=40, w=6, h=24  (3px×12px at 2x)
   Top:        x=88, y=32, w=6, h=8   (3px×4px at 2x)
   Bottom:     x=94, y=32, w=6, h=8   (3px×4px at 2x)
   
   LEFT ARM (slim):
   Right side: x=64, y=104, w=8, h=24
   Front:      x=72, y=104, w=6, h=24
   Left side:  x=78, y=104, w=8, h=24
   Back:       x=86, y=104, w=6, h=24
   Top:        x=72, y=96,  w=6, h=8
   Bottom:     x=78, y=96,  w=6, h=8
   
   RIGHT ARM OVERLAY (slim):
   Right side: x=80, y=72, w=8, h=24
   Front:      x=88, y=72, w=6, h=24
   Left side:  x=94, y=72, w=8, h=24
   Back:       x=102,y=72, w=6, h=24
   Top:        x=88, y=64, w=6, h=8
   Bottom:     x=94, y=64, w=6, h=8
   
   LEFT ARM OVERLAY (slim):
   Right side: x=96, y=104, w=8, h=24
   Front:      x=104,y=104, w=6, h=24
   Left side:  x=110,y=104, w=8, h=24
   Back:       x=118,y=104, w=6, h=24
   Top:        x=104,y=96,  w=6, h=8
   Bottom:     x=110,y=96,  w=6, h=8
*/

/* =====================
   RIGHT ARM (slim)
   ===================== */

.container_skinviewer.alex .post .right_hand {
  width: 37.5px;
  transform: translatez(-125px) translatey(-50px) translatex(-37.5px);
}

.container_skinviewer.alex .post .right_hand .front {
  width: 37.5px;
  height: 150px;
  /* 6 skin pixels wide must fill 37.5px → total image = 37.5/6*128 = 800px */
  /* Same 800px as normal but element is narrower, so % = 800/37.5*100 */
  background-size: 2133.33% 533.33%;
  background-position: -550px -250px;
}

.container_skinviewer.alex .post .right_hand .back {
  width: 37.5px;
  height: 150px;
  background-size: 2133.33% 533.33%;
  background-position: -637.5px -250px;
}

.container_skinviewer.alex .post .right_hand .right {
  width: 50px;
  height: 150px;
  background-size: 1600%;
  background-position: -500px -250px;
  transform: rotatez(90deg) rotateX(-90deg) translatex(75px) translatey(-50px) translatez(-25px);
}

.container_skinviewer.alex .post .right_hand .left {
  width: 50px;
  height: 150px;
  background-size: 1600%;
  background-position: -587.5px -250px;
  transform: rotatez(-90deg) rotateX(-90deg) translatex(-75px) translatey(-50px) translatez(62.5px);
}

.container_skinviewer.alex .post .right_hand .top {
  width: 37.5px;
  height: 50px;
  background-size: 2133.33% 1600%;
  background-position: -550px -200px;
  transform: translatex(50px) translatey(125px) translatez(125px);
}

.container_skinviewer.alex .post .right_hand .bottom {
  width: 37.5px;
  height: 50px;
  background-size: 2133.33% 1600%;
  background-position: -587.5px -200px;
  transform: translatex(50px) translatey(125px) translatez(-25px) rotate(180deg);
}

/* =====================
   LEFT ARM (slim)
   ===================== */

.container_skinviewer.alex .post .left_hand {
  width: 37.5px;
  transform: translatez(-125px) translatey(-50px) translatex(100px);
}

.container_skinviewer.alex .post .left_hand .front {
  width: 37.5px;
  height: 150px;
  background-size: 2133.33% 533.33%;
  background-position: -450px -650px;
}

.container_skinviewer.alex .post .left_hand .back {
  width: 37.5px;
  height: 150px;
  background-size: 2133.33% 533.33%;
  background-position: -537.5px -650px;
}

.container_skinviewer.alex .post .left_hand .right {
  width: 50px;
  height: 150px;
  background-size: 1600%;
  background-position: -400px -650px;
  transform: rotatez(90deg) rotateX(-90deg) translatex(75px) translatey(-50px) translatez(-25px);
}

.container_skinviewer.alex .post .left_hand .left {
  width: 50px;
  height: 150px;
  background-size: 1600%;
  background-position: -487.5px -650px;
  transform: rotatez(-90deg) rotateX(-90deg) translatex(-75px) translatey(-50px) translatez(62.5px);
}

.container_skinviewer.alex .post .left_hand .top {
  width: 37.5px;
  height: 50px;
  background-size: 2133.33% 1600%;
  background-position: -450px -600px;
  transform: translatex(50px) translatey(125px) translatez(125px);
}

.container_skinviewer.alex .post .left_hand .bottom {
  width: 37.5px;
  height: 50px;
  background-size: 2133.33% 1600%;
  background-position: -487.5px -600px;
  transform: translatex(50px) translatey(125px) translatez(-25px) rotate(180deg);
}

/* =====================
   RIGHT ARM OVERLAY (slim)
   ===================== */

.container_skinviewer.alex .post .right_hand_overlay {
  width: 37.5px;
  transform: translatez(-130px) translatey(-57px) translatex(-42.5px) scale3d(1.1, 1.1, 1.1);
}

.container_skinviewer.alex .post .right_hand_overlay .front {
  width: 37.5px;
  height: 150px;
  background-size: 2133.33% 533.33%;
  background-position: -550px -450px;
}

.container_skinviewer.alex .post .right_hand_overlay .back {
  width: 37.5px;
  height: 150px;
  background-size: 2133.33% 533.33%;
  background-position: -637.5px -450px;
}

.container_skinviewer.alex .post .right_hand_overlay .right {
  width: 50px;
  height: 150px;
  background-size: 1600%;
  background-position: -500px -450px;
  transform: rotatez(90deg) rotateX(-90deg) translatex(75px) translatey(-50px) translatez(-25px);
}

.container_skinviewer.alex .post .right_hand_overlay .left {
  width: 50px;
  height: 150px;
  background-size: 1600%;
  background-position: -587.5px -450px;
  transform: rotatez(-90deg) rotateX(-90deg) translatex(-75px) translatey(-50px) translatez(62.5px);
}

.container_skinviewer.alex .post .right_hand_overlay .top {
  width: 37.5px;
  height: 50px;
  background-size: 2133.33% 1600%;
  background-position: -550px -400px;
  transform: translatex(50px) translatey(125px) translatez(125px);
}

.container_skinviewer.alex .post .right_hand_overlay .bottom {
  width: 37.5px;
  height: 50px;
  background-size: 2133.33% 1600%;
  background-position: -587.5px -400px;
  transform: translatex(50px) translatey(125px) translatez(-25px) rotate(180deg);
}

/* =====================
   LEFT ARM OVERLAY (slim)
   ===================== */

.container_skinviewer.alex .post .left_hand_overlay {
  width: 37.5px;
  transform: translatez(-130px) translatey(-57px) translatex(100px) scale3d(1.1, 1.1, 1.1);
}

.container_skinviewer.alex .post .left_hand_overlay .front {
  width: 37.5px;
  height: 150px;
  background-size: 2133.33% 533.33%;
  background-position: -650px -650px;
}

.container_skinviewer.alex .post .left_hand_overlay .back {
  width: 37.5px;
  height: 150px;
  background-size: 2133.33% 533.33%;
  background-position: -737.5px -650px;
}

.container_skinviewer.alex .post .left_hand_overlay .right {
  width: 50px;
  height: 150px;
  background-size: 1600%;
  background-position: -600px -650px;
  transform: rotatez(90deg) rotateX(-90deg) translatex(75px) translatey(-50px) translatez(-25px);
}

.container_skinviewer.alex .post .left_hand_overlay .left {
  width: 50px;
  height: 150px;
  background-size: 1600%;
  background-position: -687.5px -650px;
  transform: rotatez(-90deg) rotateX(-90deg) translatex(-75px) translatey(-50px) translatez(62.5px);
}

.container_skinviewer.alex .post .left_hand_overlay .top {
  width: 37.5px;
  height: 50px;
  background-size: 2133.33% 1600%;
  background-position: -650px -600px;
  transform: translatex(50px) translatey(125px) translatez(125px);
}

.container_skinviewer.alex .post .left_hand_overlay .bottom {
  width: 37.5px;
  height: 50px;
  background-size: 2133.33% 1600%;
  background-position: -687.5px -600px;
  transform: translatex(50px) translatey(125px) translatez(-25px) rotate(180deg);
}