/* ================================
   Global Layout
================================ */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #fbf7ff;
}

.doll-wrapper {
  height: 80vh; 
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  cursor: pointer;
}

.doll {
  position: relative;
  width: 250px;  
  height: 500px;
}

.doll-wrapper, .doll, .body {
  -webkit-tap-highlight-color: transparent; 
  outline: none; 
}

/* ================================
   Head & Neck
================================ */
.head {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 120px;
  background-color: #fff6ee;
  border-radius: 50px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
  z-index: 2;
}

.neck {
  position: absolute;
  top: 38%;
  left: 45%;
  width: 10%;
  height: 16%;
  background-color: #fff6ee;
  border-radius: 10px;
  /* z-index: 1; */
}

/* ================================
   Hair & Bangs
================================ */
.hair {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 220px;
  background-color: #9da3a8;
  border-radius: 60px 60px 30px 30px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

.bangs {
  position: absolute;
  top: 14%;
  left: 20%;
  width: 60%;
  height: 8%;
  background-color: #9da3a8;
  border-radius: 10px;
  z-index: 5; 
}

.bangsgap1,
.bangsgap2 {
  position: absolute;
  top: 30%;
  width: 10%;
  height: 90%;
  background-color: #fff6ee;
  border-radius: 10px;
  z-index: 1;
}

.bangsgap1 { left: 27%; }
.bangsgap2 { right: 27%; }

/* ================================
   Eyebrows
================================ */
.eyebrow-left,
.eyebrow-right {
  position: absolute;
  top: 22%;
  width: 12%;
  height: 2%;
  background-color: #918e8f;
  border-radius: 10px;
  z-index: 6;
  transition: transform 0.3s ease;
}

.eyebrow-left { left: 32%; }
.eyebrow-right { right: 32%; }

/* Confused doll */
.eyebrow-left.confused {
  transform: rotate(-20deg);
  transform-origin: left center;
}
.eyebrow-right.confused {
  transform: rotate(20deg);
  transform-origin: right center;
}

/* ================================
   Eyes
================================ */
.left-eye,
.right-eye {
  position: absolute;
  top: 8rem;
  width: 30px;
  height: 30px;
  background: #c8d3dd;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
  z-index: 3;
  animation: blink 4s infinite;
}

.left-eye {
  left: 30%;
  border-radius: 10px 20px 10px 20px;
}

.right-eye {
  right: 30%;
  border-radius: 20px 10px 20px 10px;
}

/* Blinking animation */
@keyframes blink {
  0%, 90%, 100% { height: 30px; } /* eyes open */
  92%, 98% { height: 4px; }       /* eyes closed */
}

/* ================================
   Lips
================================ */
.lips {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 8px;
  background: #fcb9b9;
  border-radius: 10px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
  z-index: 99;
  transition: all 0.3s ease;
}

/* Mouth open state */
.lips.open {
  top: 34%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fcb9b9;
}

/* ================================
   Accessories - Ribbon
================================ */
.ribbon {
  position: absolute;
  top: 1.4rem;
  right: 15%;
  width: 40px;
  height: 40px;
  background-color: pink;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 200;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

.ribbon1 {
  position: absolute;
  top: -28px;
  right: 55px;
  width: 60px;
  height: 50px;
  background-color: pink;
  border-radius: 20px 50px 0 20px;
  transform: translateX(50%);
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

.ribbon2 {
  position: absolute;
  top: 10px;
  left: 25px;
  width: 60px;
  height: 50px;
  background-color: pink;
  border-radius: 50px 20px 20px 0;
  transform: rotate(55deg);
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

.ribbon3 {
  position: absolute;
  top: 0;
  right: -47%;
  width: 40px;
  height: 40px;
  background-color: pink;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

/* ================================
   Ears
================================ */
.left-ear,
.right-ear {
  position: absolute;
  top: 25%;
  width: 25px;
  height: 40px;
  background-color: #fff6ee;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

.left-ear {
  left: 12.5%;
  border-radius: 30px 30px 10px 60px;
}

.right-ear {
  right: 12.5%;
  border-radius: 30px 30px 60px 10px;
}

/* ================================
   Blushes
================================ */
.left-blush,
.right-blush {
  position: absolute;
  top: 35%;
  width: 8%;
  height: 3%;
  background-color: #ffe2e8;
  border-radius: 30px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
  z-index: 5;
}

.left-blush { left: 30%; }
.right-blush { left: 63%; }

/* ================================
   Body
================================ */
.body {
  position: absolute;
  top: 220px;   /* consistent gap below head/neck */
  left: 50%;
  width: 150px;
  height: 180px;
  transform: translateX(-50%);
  background-color: #fff6ee;
  border-radius: 30px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

/* ================================
   Arms
================================ */
/* Arms */
.left-arms {
  position: absolute;
  top: 40px;
  left: -20px;
  width: 50px;
  height: 50px;
  background: #f4cfc7;
  border-radius: 10px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}
.right-arms {
  position: absolute;
  top: 40px;
  right: -20px;
  width: 50px;
  height: 50px;
  background: #f4cfc7;
  border-radius: 10px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}
  
/* ================================
   Shirt
================================ */
.shirt {
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 110px;
  height: 150px;
  background-color: #f4cfc7;
  border-radius: 10px 10px 100px 100px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

/* ================================
   Legs
================================ */
.legL,
.legR {
  position: absolute;
  bottom: -120px;
  width: 40px;
  height: 50px;
  background-color: #c4c3e3;
  border-radius: 0 0 10px 10px;
  border-top: 60px solid #fff6ee;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}

/* Legs */
.legL {
  left: 79px;
}
.legR {
  right: 79px;
}

/* ================================
   Dress
================================ */
.dress {
  position: absolute;
  top: 90px;
  left: 5px;
  width: 140px;
  height: 120px;
  background-color: #d1e0de;
  border-radius: 50px 50px 10px 10px;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2);
}


/* ☁️🌱 CHA 🌱☁️ */