/* ============================================ */
/* === CHIBI ASTRONAUT — dark atmospheric ====== */
/* ============================================ */
.player {
  position: absolute;
  bottom: 19vh;
  left: 360px;
  z-index: 50; /* always above plants (max z-index 17) and eggs */
  width: 62px;
  height: 100px;
  transition: none;
  filter:
    drop-shadow(0 0 3px rgba(0,0,0,0.8))
    drop-shadow(0 0 8px rgba(255,140,50,0.18));
}

/* --- HELMET (oversized, 3D feel) --- */
.astro-helmet {
  position: absolute;
  bottom: 40px;
  left: -1px;
  width: 54px;
  height: 50px;
  background: linear-gradient(160deg, #3a3530 0%, #2b2622 40%, #1e1a16 100%);
  border-radius: 27px 27px 22px 22px;
  border: 2px solid #3a3228;
  z-index: 3;
  box-shadow:
    inset 4px 4px 0 rgba(255,200,150,0.05),
    inset -4px -4px 0 rgba(0,0,0,0.25),
    0 3px 10px rgba(0,0,0,0.6);
}
.astro-helmet::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 16px;
  height: 22px;
  background: rgba(255,220,180,0.045);
  border-radius: 50%;
  pointer-events: none;
}
.astro-helmet::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 5px;
  width: 44px;
  height: 7px;
  background: linear-gradient(90deg, #2a2520, #3a3530, #2a2520);
  border-radius: 0 0 10px 10px;
  border: 1px solid #3a3228;
  border-top: none;
}

/* --- VISOR --- */
.astro-visor {
  position: absolute;
  top: 9px;
  left: 6px;
  width: 40px;
  height: 30px;
  background: linear-gradient(150deg, #1e3040 0%, #101c28 35%, #162535 70%, #1a2d42 100%);
  border-radius: 20px 20px 16px 16px;
  border: 2px solid #2a3a4a;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.5),
    inset 0 0 6px rgba(80,140,220,0.12),
    0 0 8px rgba(80,140,220,0.06);
  overflow: hidden;
}
.astro-visor::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 6px;
  width: 28px;
  height: 34px;
  background: linear-gradient(135deg, rgba(150,200,255,0.18) 0%, transparent 45%);
  transform: rotate(-12deg);
  pointer-events: none;
}

/* --- EYES --- */
.eye {
  position: absolute;
  border-radius: 50%;
  z-index: 4;
  animation: blink 5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
.eye-left {
  top: 10px;
  left: 5px;
  width: 14px;
  height: 15px;
  background: radial-gradient(circle at 40% 38%, #e8ddd0 0%, #c8b8a4 60%, #8a7a6a 100%);
  border: 1px solid #4a3a2a;
}
.eye-right {
  top: 10px;
  left: 22px;
  width: 14px;
  height: 15px;
  background: radial-gradient(circle at 40% 38%, #e8ddd0 0%, #c8b8a4 60%, #8a7a6a 100%);
  border: 1px solid #4a3a2a;
}
.pupil {
  position: absolute;
  width: 7px;
  height: 8px;
  background: radial-gradient(circle at 35% 35%, #1a1210 0%, #0a0808 100%);
  border-radius: 50%;
  top: 3px;
  left: 4px;
  transition: left 0.15s ease, top 0.15s ease;
}
.pupil::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 3px;
  height: 3px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
}
.pupil::after {
  content: '';
  position: absolute;
  bottom: 1px;
  right: 0;
  width: 2px;
  height: 2px;
  background: rgba(255,180,100,0.4);
  border-radius: 50%;
}

/* --- ANTENNA --- */
.astro-antenna {
  position: absolute;
  top: -16px;
  right: 12px;
  width: 3px;
  height: 18px;
  background: linear-gradient(to top, #2a2320, #4a4038);
  border-radius: 2px;
  z-index: 4;
}
.astro-antenna-tip {
  position: absolute;
  top: -20px;
  right: 10px;
  width: 7px;
  height: 7px;
  background: #ffcc44;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffcc44, 0 0 16px rgba(255,204,68,0.5);
  animation: tipGlow 1.5s ease-in-out infinite alternate;
  z-index: 4;
}
@keyframes tipGlow {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* Ear piece */
.astro-earpiece {
  position: absolute;
  top: 16px;
  left: -6px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #3a3530, #1e1a16);
  border-radius: 50%;
  border: 1px solid #3a3228;
  z-index: 4;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.3);
}

/* --- BODY --- */
.astro-body {
  position: absolute;
  bottom: 18px;
  left: 12px;
  width: 32px;
  height: 26px;
  background: linear-gradient(180deg, #2b2622 0%, #1e1a16 100%);
  border-radius: 5px 5px 3px 3px;
  z-index: 2;
  border: 1px solid #3a3228;
  box-shadow:
    inset -2px 0 0 rgba(0,0,0,0.15),
    1px 0 0 rgba(255,140,60,0.04);
}
.astro-body::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 2px;
  width: 28px;
  height: 6px;
  background: #2b2622;
  clip-path: polygon(0 0, 10% 100%, 18% 0, 28% 100%, 38% 0, 48% 100%, 58% 0, 68% 100%, 78% 0, 88% 100%, 96% 0, 100% 80%);
}

/* Chest panel */
.astro-chest-panel {
  position: absolute;
  top: 5px;
  left: 8px;
  width: 16px;
  height: 9px;
  background: #161210;
  border-radius: 2px;
  border: 1px solid #2a2320;
}
.astro-chest-panel::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 3px;
  height: 3px;
  background: #338844;
  border-radius: 50%;
  box-shadow: 5px 0 0 #993333, 10px 0 0 #335588;
  animation: panelBlink 2s steps(1) infinite;
}
@keyframes panelBlink {
  0% { background: #338844; box-shadow: 5px 0 0 #993333, 10px 0 0 #335588; }
  33% { background: #2a7738; box-shadow: 5px 0 0 #aa4444, 10px 0 0 #335588; }
  66% { background: #338844; box-shadow: 5px 0 0 #993333, 10px 0 0 #4477aa; }
  100% { background: #338844; box-shadow: 5px 0 0 #993333, 10px 0 0 #335588; }
}

/* --- BACKPACK --- */
.astro-backpack {
  position: absolute;
  bottom: 20px;
  left: -4px;
  width: 20px;
  height: 34px;
  background: linear-gradient(180deg, #343218 0%, #2a2816 100%);
  border-radius: 5px 3px 5px 5px;
  z-index: 1;
  border: 1px solid #4a4830;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.2);
}
.astro-backpack::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 2px;
  width: 16px;
  height: 10px;
  background: #343218;
  border-radius: 5px;
  border: 1px solid #4a4830;
}
.astro-backpack::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 3px;
  width: 14px;
  height: 10px;
  background: #2a2816;
  border-radius: 2px;
  border: 1px solid #4a4830;
}
.astro-strap {
  position: absolute;
  width: 3px;
  height: 16px;
  background: #4a4830;
  z-index: 2;
  border-radius: 1px;
}
.astro-strap.left-strap { bottom: 30px; left: 12px; }
.astro-strap.right-strap { bottom: 30px; left: 20px; transform: rotate(3deg); }

/* --- ARMS --- */
.astro-arm {
  position: absolute;
  width: 12px;
  height: 24px;
  background: linear-gradient(180deg, #2b2622 0%, #2b2622 55%, #4a3828 55%, #4a3828 100%);
  border-radius: 6px;
  transform-origin: top center;
  z-index: 2;
  border: 1px solid #3a3228;
}
.astro-arm::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: -1px;
  width: 14px;
  height: 10px;
  background: radial-gradient(ellipse at 50% 60%, #5a4430 0%, #3a2a1a 100%);
  border-radius: 6px;
  border: 1px solid #4a3a28;
}
.astro-arm::before {
  content: '';
  position: absolute;
  top: 55%;
  left: 0;
  width: 12px;
  height: 3px;
  background: #5a4a38;
  border-radius: 1px;
}
.astro-arm.left { bottom: 22px; left: 2px; transform: rotate(6deg); }
.astro-arm.right { bottom: 22px; right: -2px; transform: rotate(-35deg); }

/* --- LEGS --- */
.astro-leg {
  position: absolute;
  bottom: 0;
  width: 13px;
  height: 20px;
  background: #1a1614;
  border-radius: 4px 4px 0 0;
  z-index: 2;
  border: 1px solid #2a2320;
  border-bottom: none;
}
.astro-leg.left { left: 13px; transform: rotate(1deg); }
.astro-leg.right { left: 29px; transform: rotate(-1deg); }

/* --- BOOTS --- */
.astro-boot {
  position: absolute;
  bottom: -7px;
  left: -4px;
  width: 22px;
  height: 12px;
  background: linear-gradient(180deg, #4a3828 0%, #3a2818 100%);
  border-radius: 5px 10px 6px 5px;
  border: 1px solid #5a4a38;
}
.astro-boot::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 2px;
  width: 16px;
  height: 3px;
  background: #5a4a38;
  border-radius: 1px;
}
.astro-boot::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 3px;
  width: 5px;
  height: 5px;
  background: #6a5a48;
  border-radius: 1px;
  border: 1px solid #4a3828;
}

/* --- LANTERN --- */
.lantern {
  position: absolute;
  bottom: 24px;
  right: -18px;
  width: 14px;
  height: 16px;
  z-index: 12;
  animation: lanternSway 2s ease-in-out infinite;
}
@keyframes lanternSway {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
.lantern-body {
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #664830 0%, #443020 100%);
  border-radius: 3px;
  border: 1px solid #3a2810;
}
.lantern-flame {
  position: absolute;
  bottom: 2px;
  left: 3px;
  width: 8px;
  height: 10px;
  background: #ffcc55;
  border-radius: 50% 50% 30% 30%;
  box-shadow:
    0 0 8px #ffaa44,
    0 0 18px #ff8822,
    0 0 40px rgba(255,136,34,0.5),
    0 0 80px rgba(255,100,20,0.2);
  animation: flame 0.35s ease-in-out infinite alternate;
}
.lantern-handle {
  position: absolute;
  top: -5px;
  left: 2px;
  width: 10px;
  height: 6px;
  border: 2px solid #664830;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
}
.lantern-glow {
  position: absolute;
  bottom: -20px;
  right: -80px;
  width: 220px;
  height: 60px;
  background: radial-gradient(ellipse at 40% 0%, rgba(255,150,60,0.2) 0%, rgba(255,120,40,0.06) 50%, transparent 75%);
  pointer-events: none;
  filter: blur(4px);
  animation: glowPulse 2s ease-in-out infinite alternate;
}
.player-glow {
  position: absolute;
  bottom: -60px;
  left: -120px;
  width: 320px;
  height: 240px;
  background: radial-gradient(ellipse at 55% 35%, rgba(255,140,50,0.14) 0%, rgba(255,100,30,0.06) 30%, rgba(255,80,20,0.02) 50%, transparent 70%);
  pointer-events: none;
  z-index: 8;
  filter: blur(8px);
  animation: glowPulse 3s ease-in-out infinite alternate;
}

@keyframes flame { 0% { height: 8px; opacity: 0.85; transform: scaleX(0.9); } 100% { height: 11px; opacity: 1; transform: scaleX(1.1); } }
@keyframes glowPulse { 0% { opacity: 0.65; } 100% { opacity: 1; } }

/* === WALKING === */
.player.walking .astro-leg.left { animation: walkL 0.35s steps(2) infinite; }
.player.walking .astro-leg.right { animation: walkR 0.35s steps(2) infinite; }
.player.walking .astro-arm.left { animation: armSwingL 0.35s steps(2) infinite; }
.player.walking .astro-body { animation: bodyBob 0.35s ease infinite; }
.player.walking .astro-helmet { animation: headBob 0.35s ease infinite; }
.player.walking .lantern { animation: lanternSway 0.35s ease infinite, lanternSway 2s ease-in-out infinite; }
@keyframes walkL { 0% { transform: translateX(-2px) rotate(-5deg); } 50% { transform: translateX(2px) rotate(5deg); } 100% { transform: translateX(-2px) rotate(-5deg); } }
@keyframes walkR { 0% { transform: translateX(2px) rotate(5deg); } 50% { transform: translateX(-2px) rotate(-5deg); } 100% { transform: translateX(2px) rotate(5deg); } }
@keyframes armSwingL { 0% { transform: rotate(15deg); } 50% { transform: rotate(-8deg); } 100% { transform: rotate(15deg); } }
@keyframes bodyBob { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
@keyframes headBob { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(1deg); } 100% { transform: translateY(0) rotate(0); } }

/* === IDLE === */
.player:not(.walking) .astro-body { animation: breathe 2.5s ease-in-out infinite; }
.player:not(.walking) .astro-helmet { animation: breatheHead 2.5s ease-in-out infinite; }
.player:not(.walking) .astro-arm.right { animation: idleArmSway 3s ease-in-out infinite; }
@keyframes breathe { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
@keyframes breatheHead { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1px) rotate(0.5deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes idleArmSway { 0% { transform: rotate(-35deg); } 50% { transform: rotate(-30deg); } 100% { transform: rotate(-35deg); } }

.player.facing-left { transform: scaleX(-1); }