/* ============================================================
   Cube — Minecraft-style blocky mascot. Steve-proportion body.
   ============================================================ */

.cube-wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 32px;
  height: 64px;
  pointer-events: auto;
  cursor: grab;
  z-index: 5;
  transform: translateX(-50%);
  image-rendering: pixelated;
  transition: left 0.05s linear;
}
.cube-wrap:active { cursor: grabbing; }

/* Ground shadow */
.cube-shadow {
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse, oklch(0 0 0 / 0.55), transparent 70%);
  z-index: 1;
}

/* Body container = does the bounce/jump. */
.cube-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  animation: cubeBreathe 2.6s steps(2, end) infinite;
  transform-origin: bottom center;
  image-rendering: pixelated;
}
@keyframes cubeBreathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* Walking — stepped, not smooth (Minecraft feel) */
.state-walk .cube-body { animation: cubeWalkBob 0.5s steps(2, end) infinite; }
@keyframes cubeWalkBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.state-walk .leg.l { animation: legMC 0.5s steps(2, end) infinite; transform-origin: top center; }
.state-walk .leg.r { animation: legMCR 0.5s steps(2, end) infinite; transform-origin: top center; }
.state-walk .cube-arm.l { animation: legMCR 0.5s steps(2, end) infinite; transform-origin: top center; }
.state-walk .cube-arm.r { animation: legMC 0.5s steps(2, end) infinite; transform-origin: top center; }
@keyframes legMC  { 0% { transform: rotate(22deg); } 50% { transform: rotate(-22deg); } 100% { transform: rotate(22deg); } }
@keyframes legMCR { 0% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } 100% { transform: rotate(-22deg); } }

/* Jump — squash / stretch */
.state-jump .cube-body { animation: cubeJump 0.65s steps(6, end) 1; }
@keyframes cubeJump {
  0%   { transform: translateY(0); }
  16%  { transform: translateY(-6px); }
  33%  { transform: translateY(-30px); }
  50%  { transform: translateY(-38px); }
  66%  { transform: translateY(-30px); }
  83%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* Somersault — frontflip */
.state-flip .cube-body { animation: cubeFlip 0.7s steps(8, end) 1; }
@keyframes cubeFlip {
  0%   { transform: translateY(0) rotate(0); }
  40%  { transform: translateY(-36px) rotate(-180deg); }
  60%  { transform: translateY(-28px) rotate(-270deg); }
  100% { transform: translateY(0) rotate(-360deg); }
}

/* Sleep */
.state-sleep .cube-body { animation: cubeSleep 3s steps(2, end) infinite; transform: rotate(-6deg) translateX(-2px); }
@keyframes cubeSleep { 0%, 100% { transform: rotate(-6deg) translateX(-2px) translateY(0); } 50% { transform: rotate(-6deg) translateX(-2px) translateY(-1px); } }

/* Sweat */
.state-sweat .cube-body { animation: cubeSweat 0.4s steps(2, end) infinite; }
@keyframes cubeSweat { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1px); } }

/* Crash */
.state-crash .cube-body { animation: cubeCrash 0.35s steps(4, end) 1; animation-fill-mode: forwards; }
@keyframes cubeCrash {
  0%   { transform: rotate(0); }
  100% { transform: rotate(-78deg) translateY(-4px); }
}

/* -----------  HEAD  (8px pixel blocks, 16×16 face) ----------- */
.cube-head {
  position: absolute;
  left: 4px; top: 0;
  width: 24px; height: 24px;
  background: var(--skin-head, #c9a27b);
  box-shadow:
    inset -3px -3px 0 oklch(0 0 0 / 0.22),
    inset  3px  3px 0 oklch(1 0 0 / 0.08);
  image-rendering: pixelated;
}
/* hair / top */
.cube-head::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; height: 9px;
  background: #3a2410;
  box-shadow: inset -2px -1px 0 oklch(0 0 0 / 0.25);
}
/* left sideburn shadow */
.cube-head::after {
  content: '';
  position: absolute;
  left: 0; top: 7px; width: 3px; height: 9px;
  background: #3a2410;
}

/* Visor = the eye strip. Built as two eyes + mouth via visor children */
.cube-visor {
  position: absolute;
  left: 7px; top: 11px;
  width: 14px; height: 10px;
  background: transparent;
  border: none;
  overflow: visible;
}
/* left eye */
.cube-visor::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 4px;
  background: #fff;
  box-shadow: 2px 0 0 #2a2f55;  /* pupil */
  animation: mcBlink 5.5s steps(1, end) infinite;
}
/* right eye */
.cube-visor::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 3px; height: 4px;
  background: #fff;
  box-shadow: -2px 0 0 #2a2f55;
  animation: mcBlink 5.5s steps(1, end) infinite;
}
@keyframes mcBlink {
  0%, 94%, 100% { height: 4px; }
  97% { height: 1px; }
}

/* Mouth (a separate element) */
.cube-mouth {
  position: absolute;
  left: 11px; top: 19px;
  width: 10px; height: 2px;
  background: #5a3020;
}
.state-sleep .cube-mouth { height: 1px; background: #3a2010; }
.state-crash .cube-mouth { top: 18px; height: 3px; }

/* Sleeping — closed eyes (two lines) */
.state-sleep .cube-visor::before,
.state-sleep .cube-visor::after {
  height: 1px; background: #2a1810; animation: none;
  box-shadow: none;
  top: 3px;
}

/* Crashed — X eyes via ::before/::after reconfigure */
.state-crash .cube-visor::before,
.state-crash .cube-visor::after {
  content: '×';
  background: transparent;
  color: var(--red);
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1;
  width: auto; height: auto;
  box-shadow: none; animation: none;
  top: -2px;
}
.state-crash .cube-visor::after { right: -1px; }

/* sweat drop */
.cube-sweat {
  position: absolute;
  right: 1px; top: 14px;
  width: 3px; height: 5px;
  background: #7cc4e8;
  opacity: 0;
}
.state-sweat .cube-sweat {
  opacity: 1;
  animation: sweatMC 1.1s steps(4, end) infinite;
}
@keyframes sweatMC {
  0%   { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(18px); }
}

/* Z's */
.cube-z {
  position: absolute;
  right: -6px; top: -4px;
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--text-dim);
  opacity: 0;
}
.state-sleep .cube-z {
  opacity: 1;
  animation: zFloat 2.5s steps(6, end) infinite;
}
@keyframes zFloat {
  0%   { opacity: 0; transform: translate(0, 0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -12px); }
}

/* -----------  TORSO  ----------- */
.cube-torso {
  position: absolute;
  left: 8px; top: 24px;
  width: 16px; height: 20px;
  background: var(--shirt, #35a0ce);  /* Minecraft cyan shirt */
  box-shadow:
    inset -3px 0 0 #2a7ea0,
    inset  0 -3px 0 #1e6080,
    inset  2px 2px 0 #50b8e0;
}

/* -----------  ARMS  ----------- */
.cube-arm {
  position: absolute;
  top: 24px;
  width: 8px; height: 20px;
  background: var(--shirt, #35a0ce);
  box-shadow:
    inset -2px 0 0 #2a7ea0,
    inset  0 -3px 0 #1e6080,
    inset  1px 1px 0 #50b8e0;
}
.cube-arm .hand {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  background: var(--skin-head, #c9a27b);
  box-shadow: inset -1px -1px 0 #8a6b48;
}
.cube-arm.l { left: 0; }
.cube-arm.r { right: 0; }

/* -----------  LEGS  ----------- */
.leg {
  position: absolute;
  top: 44px;
  width: 8px; height: 20px;
  background: var(--pants, #3a4a7a);
  box-shadow:
    inset -2px 0 0 #2a3a5a,
    inset  0 -3px 0 #1a2a4a,
    inset  1px 1px 0 #5a6a9a;
}
.leg.l { left: 8px; }
.leg.r { right: 8px; }

/* Face direction */
.cube-wrap.facing-left { transform: translateX(-50%) scaleX(-1); }
.cube-wrap.facing-left .cube-speech { transform: scaleX(-1); }

/* -----------  TOOL held in right hand  ----------- */
.cube-tool {
  position: absolute;
  right: -6px; top: 36px;
  width: 14px; height: 18px;
  opacity: 0;
  image-rendering: pixelated;
  pointer-events: none;
  transform: rotate(-20deg);
  transform-origin: bottom center;
}
.cube-wrap.has-tool .cube-tool { opacity: 1; }
.cube-wrap.has-tool .cube-arm.r { transform: rotate(-40deg); transform-origin: top center; animation: none !important; }

.tool-shovel, .tool-wrench, .tool-sword, .tool-scroll { position: absolute; inset: 0; }

/* Iron shovel — wooden handle + iron head */
.tool-shovel::before { content: ''; position: absolute; left: 5px; top: 4px; width: 3px; height: 14px; background: #8b5a2b; box-shadow: inset -1px 0 0 #6a3e1a; }
.tool-shovel::after  { content: ''; position: absolute; left: 2px; top: 0;  width: 9px; height: 6px; background: #d0d4dc; box-shadow: inset -2px -1px 0 #8088a0, inset 1px 1px 0 #f0f4fc; }

/* Pickaxe (wrench slot) — iron pickaxe */
.tool-wrench::before { content: ''; position: absolute; left: 5px; top: 5px; width: 3px; height: 13px; background: #8b5a2b; box-shadow: inset -1px 0 0 #6a3e1a; }
.tool-wrench::after  { content: ''; position: absolute; left: 0; top: 0; width: 13px; height: 6px; background: #d0d4dc; box-shadow: inset -2px -1px 0 #8088a0, inset 1px 1px 0 #f0f4fc; clip-path: polygon(0% 60%, 20% 0%, 80% 0%, 100% 60%, 85% 100%, 15% 100%); }

/* Scroll — written book */
.tool-scroll::before { content: ''; position: absolute; left: 1px; top: 2px; width: 12px; height: 14px; background: #c08040; box-shadow: inset -2px -2px 0 #805020, inset 2px 2px 0 #e0a060; }
.tool-scroll::after  { content: ''; position: absolute; left: 3px; top: 5px; width: 8px; height: 1px; background: #f0e0a0; box-shadow: 0 3px 0 #f0e0a0, 0 6px 0 #f0e0a0; }

/* Iron sword */
.tool-sword::before  { content: ''; position: absolute; left: 6px; top: 0; width: 3px; height: 13px; background: #e8edf5; box-shadow: inset -1px 0 0 #a0a8b8, inset 1px 0 0 #ffffff; }
.tool-sword::after   { content: ''; position: absolute; left: 3px; top: 12px; width: 9px; height: 2px; background: #f0b060; box-shadow: 0 2px 0 #8b5a2b; }

/* Speech bubble */
.cube-speech {
  position: absolute;
  left: 38px; top: -6px;
  background: #fff;
  color: #111;
  border: 2px solid #000;
  padding: 4px 8px;
  font-family: var(--font-pixel);
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.15s;
  image-rendering: pixelated;
}
.cube-speech::before {
  content: '';
  position: absolute;
  left: -6px; top: 8px;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-right-color: #000;
}
.cube-wrap.speaks .cube-speech { opacity: 1; }

/* Landing dust */
.dust {
  position: absolute;
  bottom: 0;
  width: 4px; height: 4px;
  background: #c8a878;
  animation: dustPoof 0.5s steps(4, end) forwards;
  pointer-events: none;
}
@keyframes dustPoof {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx, 10px), -10px); opacity: 0; }
}