/* ======= CHARACTER ======= */
.character-wrap {
  position: absolute;
  bottom: 30%;
  left: 10%;
  z-index: 10;
  width: 56px;
  height: 96px;
  transition: none;
  cursor: pointer;
}

/* flip + depth scale handled entirely by JS _updatePos() */

/* Shadow */
.char-shadow {
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 10px;
  background: rgba(0,0,0,0.25);
  border-radius: 50%;
  animation: shadowPulse 0.5s ease-in-out infinite alternate;
}
@keyframes shadowPulse {
  from { transform: translateX(-50%) scaleX(1); }
  to   { transform: translateX(-50%) scaleX(0.82); }
}

/* ===== HEAD ===== */
.char-head {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 30px;
  background: var(--char-skin);
  border-radius: 50%;
  z-index: 5;
  animation: headBob 1.8s ease-in-out infinite;
}
@keyframes headBob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-2px); }
}
[data-walking="true"] .char-head { animation: headBobWalk 0.28s ease-in-out infinite; }
@keyframes headBobWalk {
  0%,100% { transform: translateX(-50%) translateY(0); }
  25%      { transform: translateX(-50%) translateY(-3px); }
  75%      { transform: translateX(-50%) translateY(1px); }
}

/* Hair — day: short undercut */
.char-hair {
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 16px;
  background: #2a1a0e;
  border-radius: 50% 50% 0 0;
  z-index: 6;
}
/* Fade sides — undercut */
.char-hair::before {
  content: '';
  position: absolute;
  bottom: 0; left: 3px; right: 3px;
  height: 7px;
  background: #1a0e06;
  border-radius: 0 0 6px 6px;
}
/* Top spiky bit */
.char-hair::after {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 6px;
  background: #2a1a0e;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* Night hair: spiky wild — lighter so eyes aren't hidden */
[data-theme="dark"] .char-hair {
  width: 34px; height: 14px;   /* shorter so it clears the eyes */
  background: #2a2a50;         /* dark indigo, not pure black */
  border-radius: 50% 50% 0 0;
  top: -2px;                   /* sit higher */
}
/* hide the undercut side that extends down over forehead */
[data-theme="dark"] .char-hair::before {
  display: none;
}
/* spiky crown going UP only */
[data-theme="dark"] .char-hair::after {
  width: 30px; height: 12px;
  background: #2a2a50;
  clip-path: polygon(0 100%,12% 0,28% 65%,48% 0,68% 65%,84% 0,100% 100%);
  top: -10px; left: 50%; transform: translateX(-50%);
}

/* Eyes */
.char-eyes {
  position: absolute;
  top: 11px; left: 4px; right: 4px;
  display: flex;
  justify-content: space-between;
  z-index: 7;
}
.eye {
  width: 7px; height: 7px;
  background: #1a1008;
  border-radius: 50%;
  position: relative;
  animation: blink 4s ease-in-out infinite;
}
.eye::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
}
@keyframes blink {
  0%,90%,100% { transform: scaleY(1); }
  94%          { transform: scaleY(0.08); }
}

/* Night: sharp determined eyes */
[data-theme="dark"] .eye {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(255,255,255,0.5);
}
[data-theme="dark"] .eye::after { background: #00d4ff; width: 3px; height: 3px; }

/* NO glasses by default */
.char-glasses { display: none; }

/* Night: sunglass visor */
[data-theme="dark"] .char-glasses {
  display: block;
  position: absolute;
  top: 10px; left: 2px; right: 2px;
  height: 8px;
  background: linear-gradient(90deg, rgba(0,212,255,0.6), rgba(255,0,128,0.6));
  border-radius: 3px;
  z-index: 8;
  box-shadow: 0 0 6px rgba(0,212,255,0.5);
}

/* Mouth */
.char-mouth {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 5px;
  border-bottom: 2.5px solid #8a4a2a;
  border-radius: 0 0 6px 6px;
}
/* Night: smirk */
[data-theme="dark"] .char-mouth {
  border-bottom: 2.5px solid #ff4488;
  width: 14px;
  box-shadow: 0 1px 4px rgba(255,68,136,0.4);
}

/* ===== NECK ===== */
.char-neck {
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 8px;
  background: var(--char-skin);
  z-index: 4;
}
/* Neck muscles (trapezius bumps) */
.char-neck::before {
  content: '';
  position: absolute;
  top: 0; left: -4px;
  width: 5px; height: 6px;
  background: #d4a882;
  border-radius: 50% 0 0 0;
}
.char-neck::after {
  content: '';
  position: absolute;
  top: 0; right: -4px;
  width: 5px; height: 6px;
  background: #d4a882;
  border-radius: 0 50% 0 0;
}

/* ===== BODY — Muscular T-shirt ===== */
.char-body {
  position: absolute;
  top: 34px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 30px;
  background: var(--char-shirt-day);
  border-radius: 8px 8px 4px 4px;
  z-index: 4;
  transition: background var(--transition);
  overflow: visible;
}
/* Chest muscle definition line */
.char-body::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 16px;
  background: rgba(0,0,0,0.08);
  border-radius: 1px;
}
/* Pec shelf bulge */
.char-chest-l, .char-chest-r {
  position: absolute;
  top: 4px;
  width: 13px; height: 10px;
  background: rgba(0,0,0,0.04);
  border-radius: 50% 50% 30% 30%;
  z-index: 5;
}
.char-chest-l { left: 1px; }
.char-chest-r { right: 1px; }

/* Night: tank top / sleeveless */
[data-theme="dark"] .char-body {
  background: #0a0a18;
  width: 36px;
  box-shadow: 0 0 12px rgba(0,212,255,0.2), 0 0 30px rgba(0,212,255,0.08);
}
/* Tank top straps */
[data-theme="dark"] .char-body::after {
  content: '';
  position: absolute;
  top: -2px; left: 6px; right: 6px;
  height: 6px;
  background: #1a1a30;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 10% 50%);
  box-shadow: 22px 0 0 0 #1a1a30;
}

/* ===== SHOULDER MUSCLES ===== */
.char-shoulder-l, .char-shoulder-r {
  position: absolute;
  top: 32px;
  width: 11px; height: 13px;
  /* Day mode: match shirt so it looks like puffy shirt sleeves blending to deltoid */
  background: var(--char-shirt-day);
  border-radius: 50% 50% 35% 35%;
  z-index: 3;
  transition: background var(--transition), box-shadow var(--transition);
}
/* Slight shadow line on the day shirt shoulder for muscle definition */
.char-shoulder-l::after, .char-shoulder-r::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 2px;
  background: rgba(0,0,0,0.08);
  border-radius: 1px;
}
.char-shoulder-l { left: 0px; }
.char-shoulder-r { right: 0px; }

/* Night: exposed skin deltoids with glow */
[data-theme="dark"] .char-shoulder-l,
[data-theme="dark"] .char-shoulder-r {
  background: var(--char-skin);
  box-shadow: 0 0 8px rgba(0,212,255,0.2);
  top: 30px;
  width: 12px; height: 14px;
}

/* ===== ARMS — Muscular ===== */
.char-arm {
  position: absolute;
  top: 38px;
  width: 11px; height: 24px;
  background: var(--char-shirt-day);
  border-radius: 6px 6px 4px 4px;
  transform-origin: top center;
  z-index: 3;
  transition: background var(--transition);
}
/* Bicep bulge on arm */
.char-arm::before {
  content: '';
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 10px;
  background: rgba(0,0,0,0.07);
  border-radius: 50%;
}

[data-theme="dark"] .char-arm {
  background: var(--char-skin);
  box-shadow: 0 0 6px rgba(0,212,255,0.1);
}
[data-theme="dark"] .char-arm::before { background: rgba(0,0,0,0.15); }

.char-arm-left  { left: 2px; }
.char-arm-right { right: 2px; }

.char-arm-left  { animation: armSwingL 1.8s ease-in-out infinite; }
.char-arm-right { animation: armSwingR 1.8s ease-in-out infinite; }
@keyframes armSwingL { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(6deg); } }
@keyframes armSwingR { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(-6deg); } }

[data-walking="true"] .char-arm-left  { animation: armWalkL 0.28s ease-in-out infinite; }
[data-walking="true"] .char-arm-right { animation: armWalkR 0.28s ease-in-out infinite; }
@keyframes armWalkL { 0%,100% { transform: rotate(-30deg); } 50% { transform: rotate(30deg); } }
@keyframes armWalkR { 0%,100% { transform: rotate(30deg); } 50% { transform: rotate(-30deg); } }

/* Hands / fists */
.char-hand {
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--char-skin);
  border-radius: 3px;
}
[data-theme="dark"] .char-hand { border-radius: 3px; }

/* ===== PANTS / GYM SHORTS ===== */
.char-pants {
  position: absolute;
  top: 62px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 18px;
  background: var(--char-pants-day);
  border-radius: 2px 2px 4px 4px;
  z-index: 3;
  transition: background var(--transition);
}
/* Night: gym shorts — shorter, side stripe */
[data-theme="dark"] .char-pants {
  background: #111128;
  height: 14px;
}
[data-theme="dark"] .char-pants::before {
  content: '';
  position: absolute;
  top: 0; left: 2px;
  width: 3px; height: 100%;
  background: rgba(0,212,255,0.5);
  border-radius: 1px;
}
[data-theme="dark"] .char-pants::after {
  content: '';
  position: absolute;
  top: 0; right: 2px;
  width: 3px; height: 100%;
  background: rgba(255,0,128,0.5);
  border-radius: 1px;
}

/* ===== LEGS ===== */
.char-legs {
  position: absolute;
  top: 78px; left: 50%;
  transform: translateX(-50%);
  width: 30px;
  display: flex;
  gap: 4px;
  z-index: 3;
}
.char-leg {
  width: 13px; height: 18px;
  background: var(--char-pants-day);
  border-radius: 3px 3px 5px 5px;
  transform-origin: top center;
  transition: background var(--transition);
  position: relative;
}
/* Quad muscle definition */
.char-leg::before {
  content: '';
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 1px;
}

[data-theme="dark"] .char-leg { background: var(--char-skin); }

.char-leg-left  { animation: legIdleL 1.8s ease-in-out infinite; }
.char-leg-right { animation: legIdleR 1.8s ease-in-out infinite; }
@keyframes legIdleL { 0%,100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }
@keyframes legIdleR { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

[data-walking="true"] .char-leg-left  { animation: legWalkL 0.28s ease-in-out infinite; }
[data-walking="true"] .char-leg-right { animation: legWalkR 0.28s ease-in-out infinite; }
@keyframes legWalkL { 0%,100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
@keyframes legWalkR { 0%,100% { transform: rotate(22deg); } 50% { transform: rotate(-22deg); } }

/* Shoes */
.char-shoe {
  position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 8px;
  background: #1a1a1a;
  border-radius: 2px 6px 6px 2px;
}
/* Night: fire/glow sneakers */
[data-theme="dark"] .char-shoe {
  background: #111;
  border-bottom: 2px solid #00d4ff;
  box-shadow: 0 2px 8px rgba(0,212,255,0.6), 0 4px 16px rgba(0,212,255,0.3);
}

/* ===== NIGHT MODE AURA — strong, visible ===== */
[data-theme="dark"] .character-wrap::before {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0,212,255,0.30) 0%,
    rgba(0,212,255,0.18) 25%,
    rgba(255,0,128,0.14) 50%,
    rgba(140,0,255,0.08) 65%,
    transparent 75%
  );
  animation: auraPulse 1.8s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
  filter: blur(4px);
}
@keyframes auraPulse {
  0%,100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.22); opacity: 1; }
}
/* Rim light on body edges */
[data-theme="dark"] .char-body {
  box-shadow:
    0 0 12px rgba(0,212,255,0.5),
    0 0 28px rgba(0,212,255,0.25),
    inset 0 0 8px rgba(0,212,255,0.08);
}
/* Ground energy glow */
[data-theme="dark"] .character-wrap::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 22px;
  background: radial-gradient(ellipse, rgba(0,212,255,0.35) 0%, rgba(255,0,128,0.15) 50%, transparent 75%);
  animation: groundGlow 1.8s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
  filter: blur(3px);
}
@keyframes groundGlow {
  from { opacity: 0.6; width: 55px; }
  to   { opacity: 1;   width: 78px; }
}

/* ===== FOOTSTEP TRAIL ===== */
.footstep {
  position: absolute;
  bottom: 29%;
  width: 8px; height: 4px;
  background: rgba(79,110,247,0.3);
  border-radius: 50%;
  pointer-events: none;
  animation: footFade 2s ease-out forwards;
  z-index: 5;
}
[data-theme="dark"] .footstep {
  background: rgba(0,212,255,0.5);
  box-shadow: 0 0 8px rgba(0,212,255,0.4);
}
@keyframes footFade {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ===== COLLECT LABEL ===== */
.collect-label {
  position: absolute;
  z-index: 30;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  pointer-events: none;
  text-shadow: 0 0 10px currentColor, 0 2px 4px rgba(0,0,0,0.5);
  animation: collectFloat 1s cubic-bezier(0.2,0.8,0.3,1) forwards;
}
@keyframes collectFloat {
  0%   { transform: translateY(0) scale(0.5); opacity: 1; }
  30%  { transform: translateY(-15px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-55px) scale(0.9); opacity: 0; }
}

/* ===== BURST PARTICLES ===== */
.burst-dot {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  animation: burstDot 0.65s cubic-bezier(0.2,0.8,0.3,1) forwards;
}
@keyframes burstDot {
  from { transform: translate(0,0) scale(1.2); opacity: 1; }
  to   { transform: var(--tx, translate(30px,-30px)) scale(0); opacity: 0; }
}

/* ===== SPARKLE ===== */
.sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  font-size: 14px;
  animation: sparklePop 0.9s ease-out forwards;
}
@keyframes sparklePop {
  0%   { transform: scale(0) rotate(0deg); opacity: 1; }
  50%  { transform: scale(1.6) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg) translateY(-35px); opacity: 0; }
}
.sparkle::before { content: '✦'; color: var(--gold); }

/* Ring shockwave */
.sparkle-ring {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: ringExpand 0.65s ease-out forwards;
  pointer-events: none;
  z-index: 24;
}
@keyframes ringExpand {
  from { transform: scale(0.3); opacity: 1; }
  to   { transform: scale(2.5); opacity: 0; }
}

/* ===== RAIN ITEMS (click effect) ===== */
.rain-item {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  z-index: 9998;
  animation: rainFall 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform-origin: center;
}
@keyframes rainFall {
  0%   { transform: translate(0,0) rotate(0deg) scale(1.2); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--vx,30px), calc(var(--vy,-60px) + 120px)) rotate(720deg) scale(0.3); opacity: 0; }
}

/* Click flash */
.click-flash {
  position: fixed;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9997;
  animation: flashBoom 0.4s ease-out forwards;
}
@keyframes flashBoom {
  from { transform: scale(0.2); opacity: 1; }
  to   { transform: scale(3); opacity: 0; }
}

/* ===== IDLE BREATHING ===== */
.character-wrap:not([data-walking="true"]) .char-body {
  animation: breatheBody 2s ease-in-out infinite;
}
@keyframes breatheBody {
  0%,100% { transform: translateX(-50%) scaleY(1); }
  50%      { transform: translateX(-50%) scaleY(1.04); }
}

/* Score pop */
.score-pop {
  animation: scorePop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes scorePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}