/* ============================================================
   pieces.css — 캔디 피스(젤리 캐릭터) 비주얼 오버레이
   style.css 위에 얹는 파일. index.html에서 style.css 다음에
   <link rel="stylesheet" href="pieces.css"> 로 로드할 것.

   목표 (DESIGN_BRIEF 기준):
   1. 색마다 다른 실루엣 (하트/별/원/클로버/물방울/다이아몬드)
   2. 광택 하이라이트 + 진한 그림자 대비 강화
   3. 표정(눈/입)은 유지, 새 실루엣에 맞게 배치
   ============================================================ */

/* ---------- 1) 공통: 흰 테두리/사각 그림자 제거, 실루엣을 따르는
   drop-shadow로 교체. (타이틀 화면 마스코트 .m .toy 는 제외됨) ---------- */
.c0 .toy, .c1 .toy, .c2 .toy, .c3 .toy, .c4 .toy, .c5 .toy {
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(43, 26, 74, .30)) drop-shadow(0 9px 8px rgba(0, 0, 0, .38));
}

/* 표정 파츠(i)는 광택 시트(::after)보다 위에 */
.c0 .toy > i, .c1 .toy > i, .c2 .toy > i, .c3 .toy > i, .c4 .toy > i, .c5 .toy > i {
  z-index: 4;
}

/* ---------- 2) 실루엣 + 강한 광택 그라디언트 ---------- */

/* c0 핑크 = 하트 */
.c0 .toy {
  clip-path: polygon(50% 94%, 44% 84%, 33% 76%, 21% 67%, 10% 57%, 3% 39%, 7% 24%, 11% 13%, 21% 6%, 34% 7%, 43% 9%, 47% 14%, 50% 20%, 53% 14%, 57% 9%, 66% 7%, 79% 6%, 89% 13%, 93% 24%, 97% 39%, 90% 57%, 79% 67%, 67% 76%, 56% 84%);
  background:
    radial-gradient(115% 78% at 50% 120%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 58%),
    radial-gradient(60% 50% at 50% 7%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 28%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(28% 24% at 82% 15%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ffc0dd 0%, #ff4d8f 45%, #ff1f5e 74%, #c4074a 100%);
}
.c0 .toy-bear .toy-ear { display: none; }

/* c1 주황 = 별 */
.c1 .toy {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background:
    radial-gradient(115% 78% at 50% 120%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 58%),
    radial-gradient(60% 50% at 50% 7%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 28%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(28% 24% at 82% 15%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ffe0bb 0%, #ff9a4d 45%, #ff6a14 74%, #e04d00 100%);
}
.c1 .toy-kitty .toy-ear { display: none; }
.c1 .toy-cheek { top: 40px; }
.c1 .toy-cheek.l { left: 28px; }
.c1 .toy-cheek.r { left: 42px; }

/* c2 노랑 = 원형 (튀어나온 머리숱 유지) */
.c2 .toy {
  border-radius: 50%;
  background:
    radial-gradient(115% 78% at 50% 120%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 58%),
    radial-gradient(60% 50% at 50% 7%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 28%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(28% 24% at 82% 15%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #fff7ca 0%, #ffdb55 45%, #ffb700 74%, #e69a00 100%);
}

/* c3 초록 = 클로버(♣) — 개구리 눈을 몸 안으로 내려 표정 유지 */
.c3 .toy {
  clip-path: polygon(50% 100%, 50% 85%, 43% 80%, 35% 70%, 28% 60%, 20% 55%, 12% 48%, 8% 38%, 10% 28%, 17% 22%, 28% 24%, 30% 17%, 36% 9%, 44% 3%, 50% 8%, 56% 3%, 64% 9%, 70% 17%, 72% 24%, 83% 22%, 90% 28%, 92% 38%, 88% 48%, 80% 55%, 72% 60%, 65% 70%, 57% 80%, 50% 85%);
  background:
    radial-gradient(115% 78% at 50% 120%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 58%),
    radial-gradient(60% 50% at 50% 7%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 28%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(28% 24% at 82% 15%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #d8ffdb 0%, #5ee57c 45%, #1fb94e 74%, #0f8f38 100%);
}
.c3 .toy-frog-eye { top: 29px; }
.c3 .toy-cheek { top: 40px; }
.c3 .toy-cheek.l { left: 22px; }
.c3 .toy-cheek.r { left: 43px; }

/* c4 파랑 = 물방울 — 코끼리 귀 숨기고, 코를 짧은 입술처럼 */
.c4 .toy {
  clip-path: polygon(50% 97%, 47% 89%, 40% 79%, 31% 70%, 21% 60%, 16% 47%, 17% 34%, 19% 20%, 30% 7%, 50% 3%, 70% 7%, 81% 20%, 83% 34%, 84% 47%, 79% 60%, 69% 70%, 60% 79%, 53% 89%);
  background:
    radial-gradient(115% 78% at 50% 120%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 58%),
    radial-gradient(60% 50% at 50% 7%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 28%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(28% 24% at 82% 15%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #d6f0ff 0%, #4fb4ff 45%, #0f8fff 74%, #0068e0 100%);
}
.c4 .toy-elephant .toy-ear { display: none; }
.c4 .toy-elephant .toy-trunk { top: 44px; height: 9px; border-radius: 0 0 9px 9px; }
.c4 .toy-cheek { top: 40px; }
.c4 .toy-cheek.l { left: 22px; }
.c4 .toy-cheek.r { left: 43px; }

/* c5 보라 = 다이아몬드 — 토끼 귀 숨기고, 앞니는 유지 */
.c5 .toy {
  clip-path: polygon(50% 2%, 84% 31%, 66% 98%, 34% 98%, 16% 31%);
  background:
    radial-gradient(115% 78% at 50% 120%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 58%),
    radial-gradient(60% 50% at 50% 7%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 28%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(28% 24% at 82% 15%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #f0e0ff 0%, #c07bff 45%, #a12be6 74%, #7a0fc2 100%);
}
.c5 .toy-bunny .toy-bunny-ear { display: none; }
.c5 .toy-cheek { top: 40px; }
.c5 .toy-cheek.l { left: 24px; }
.c5 .toy-cheek.r { left: 38px; }

/* ---------- 3) 공통 광택 시트: 윗부분 큰 스펙큘러 + 작은 글린트 ---------- */
.c0 .toy::after, .c1 .toy::after, .c2 .toy::after, .c3 .toy::after, .c4 .toy::after, .c5 .toy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(14% 12% at 30% 12%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(42% 36% at 50% 1%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, 0) 70%);
}