/* Seven Steps — living player character on THE CLIMB staircase */

.staircase-3d.climb-stage {
  position: relative;
  overflow: visible !important;
}

.climb-panel .game-step,
.climb-panel .game-base {
  position: relative;
  overflow: visible !important;
  flex-shrink: 0;
}

.climb-panel .game-step.current {
  z-index: 3;
}

/* Pyramid widths by step index (works for 7 or 8+ steps; ignores base sibling) */
.climb-panel .game-step[data-step="1"] { width: 96% !important; }
.climb-panel .game-step[data-step="2"] { width: 88% !important; }
.climb-panel .game-step[data-step="3"] { width: 80% !important; }
.climb-panel .game-step[data-step="4"] { width: 72% !important; }
.climb-panel .game-step[data-step="5"] { width: 64% !important; }
.climb-panel .game-step[data-step="6"] { width: 56% !important; }
.climb-panel .game-step[data-step="7"] { width: 48% !important; }
.climb-panel .game-step[data-step="8"] { width: 40% !important; }

/* ——— Player character (single overlay) ——— */
.player-character {
  --player-x: 50%;
  --player-y: 96%;
  position: absolute;
  left: var(--player-x);
  top: var(--player-y);
  transform: translate(-50%, -100%);
  width: 128px;
  height: 160px;
  z-index: 8;
  pointer-events: none;
  will-change: transform;
  transition:
    left 0.78s cubic-bezier(0.22, 0.82, 0.2, 1),
    top 0.78s cubic-bezier(0.22, 0.82, 0.2, 1);
}

.player-character.no-move-transition,
.player-character.falling {
  transition-duration: 0.55s;
}

.player-character.no-move-transition:not(.falling) {
  transition: none;
}

.player-character-motion {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  will-change: transform, filter, opacity;
}

.player-character-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55));
}

/* Soft ground shadow */
.player-character::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 65%;
  height: 14px;
  transform: translateX(-50%) scale(1);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  filter: blur(7px);
  opacity: 0.9;
  z-index: -1;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.player-character.climbing::after,
.player-character.falling::after {
  opacity: 0.28;
  transform: translateX(-50%) scale(0.82);
}

.player-character.celebrate::after {
  opacity: 0.55;
  transform: translateX(-50%) scale(0.92);
}

/* Hide legacy meeple parts if present */
.player-character .head,
.player-character .torso,
.player-character .pack,
.player-character .leg,
.climber-character {
  display: none !important;
}

/* ——— IDLE: subtle breathing (not a bounce loop) ——— */
@keyframes playerIdle {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-3px) rotate(0.25deg) scale(1.008);
  }
}

.player-character.idle .player-character-motion {
  animation: playerIdle 3.6s ease-in-out infinite;
}

/* ——— READY: anticipation lean when a question appears ——— */
@keyframes playerReady {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  40% {
    transform: translateY(-5px) rotate(-1.2deg) scale(1.012);
  }
  100% {
    transform: translateY(-4px) rotate(-0.8deg) scale(1.01);
  }
}

.player-character.ready .player-character-motion {
  animation: playerReady 0.55s cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
}

/* ——— CLIMB hop layered on coordinate move ——— */
/* Pose art carries most of the action — keep motion overlays subtle */
@keyframes playerClimbHop {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  35% {
    transform: translateY(-10px) rotate(-0.8deg) scale(1.03);
  }
  65% {
    transform: translateY(-5px) rotate(0.6deg) scale(1.015);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.player-character.climbing .player-character-motion {
  animation: playerClimbHop 0.78s cubic-bezier(0.22, 0.82, 0.2, 1) both;
}

/* ——— SUCCESS CELEBRATION ——— */
@keyframes playerCelebrate {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-6px) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.player-character.celebrate .player-character-motion {
  animation: playerCelebrate 0.4s cubic-bezier(0.22, 0.75, 0.25, 1) both;
}

/* ——— WRONG: stay / wobble ——— */
@keyframes playerWrongStay {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  20% {
    transform: translateX(4px) rotate(1.6deg);
  }
  45% {
    transform: translateX(-5px) rotate(-2deg);
  }
  70% {
    transform: translateX(3px) rotate(1deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

.player-character.wrong .player-character-motion {
  animation: playerWrongStay 0.55s ease-in-out both;
}

/* ——— FALL downward hop ——— */
@keyframes playerFallHop {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  40% {
    transform: translateY(10px) rotate(2deg) scale(0.96);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.player-character.falling .player-character-motion {
  animation: playerFallHop 0.55s cubic-bezier(0.4, 0.05, 0.3, 1) both;
}

/* ——— Role-specific accents (full-sprite simulation) ——— */
@keyframes historianSway {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(1px) rotate(0.35deg);
  }
}

@keyframes explorerScout {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  30% {
    transform: translateX(2px) rotate(0.6deg);
  }
  70% {
    transform: translateX(-2px) rotate(-0.55deg);
  }
}

@keyframes archivistGlow {
  0%, 100% {
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(255, 181, 54, 0.25));
  }
  50% {
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 12px rgba(255, 181, 54, 0.4));
  }
}

.player-character[data-role="Historian"].idle .player-character-image {
  animation: historianSway 4.2s ease-in-out infinite;
  transform-origin: 62% 55%;
}

.player-character[data-role="Historian"].celebrate .player-character-image,
.player-character[data-role="Historian"].success-glow .player-character-image {
  filter:
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 10px rgba(255, 214, 120, 0.45));
}

.player-character[data-role="Explorer"].idle .player-character-image {
  animation: explorerScout 5.4s ease-in-out infinite;
  transform-origin: 50% 70%;
}

.player-character[data-role="Explorer"].celebrate .player-character-image,
.player-character[data-role="Explorer"].success-glow .player-character-image {
  filter:
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 12px rgba(255, 196, 74, 0.5));
}

.player-character[data-role="Archivist"] .player-character-image {
  animation: archivistGlow 4.4s ease-in-out infinite;
}

.player-character[data-role="Archivist"].celebrate .player-character-image,
.player-character[data-role="Archivist"].success-glow .player-character-image {
  animation: none;
  filter:
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 16px rgba(255, 181, 54, 0.55));
}

/* Match mockup gold staircase chrome */
.climb-panel .panel-label {
  letter-spacing: 0.22em;
  color: #9aafc2;
}

.climb-panel .game-step {
  border-color: #c9a227 !important;
  background: linear-gradient(180deg, #1a1712, #0a0908 62%, #050504) !important;
  color: #e0b84a !important;
  border-radius: 6px;
}

.climb-panel .game-step.done {
  border-color: #eab63f !important;
  background: linear-gradient(180deg, #6e4c12, #2f1e06 62%, #140c02) !important;
}

.climb-panel .game-step.current {
  border-color: #ffe37b !important;
  color: #fff1b5 !important;
}

.climb-panel .game-step.final {
  border-color: #ffe787 !important;
  box-shadow:
    0 0 28px rgba(255, 191, 40, 0.42),
    0 0 56px rgba(255, 191, 40, 0.28) !important;
}

.climb-panel .summit-copy {
  margin-top: 10px;
  color: #d5ab48;
  letter-spacing: 0.14em;
}

@media (max-width: 1180px) {
  .player-character {
    width: 110px;
    height: 138px;
  }
}

@media (max-width: 900px) {
  .player-character {
    width: 96px;
    height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-character,
  .player-character.idle .player-character-motion,
  .player-character.ready .player-character-motion,
  .player-character.climbing .player-character-motion,
  .player-character.celebrate .player-character-motion,
  .player-character.wrong .player-character-motion,
  .player-character.falling .player-character-motion,
  .player-character[data-role="Historian"].idle .player-character-image,
  .player-character[data-role="Explorer"].idle .player-character-image,
  .player-character[data-role="Archivist"] .player-character-image {
    animation: none !important;
  }

  .player-character {
    transition: none !important;
  }
}