/* =========================================================
   🎨 특별 캐릭터 그림 — 이모지 대신 CSS 로 직접 그려요!
   쓰는 법: <div class="아트 퓨어바닐라"></div>
   ========================================================= */

.아트 {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* =========================================================
   🌟 퓨어 바닐라 쿠키
   ========================================================= */
.아트.퓨어바닐라 {
  background:
    radial-gradient(circle at 50% 20%, #fff8e0 0%, #ffe9a8 45%, #e8b860 100%);
}

/* ✨ 뒤에서 빛나는 후광 */
.아트.퓨어바닐라::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,240,170,.9) 0%, rgba(255,220,120,.35) 35%, transparent 62%);
  animation: 바닐라후광 2.6s ease-in-out infinite;
}
@keyframes 바닐라후광 {
  0%, 100% { opacity: .65; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.12); }
}

/* 🌟 빙글빙글 도는 별빛 (십자 반짝임) */
.아트.퓨어바닐라::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 130%; height: 130%;
  transform: translate(-50%, -50%);
  background:
    /* 세로 빛줄기 */
    linear-gradient(0deg,   transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%),
    /* 가로 빛줄기 */
    linear-gradient(90deg,  transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%),
    /* 대각선 빛줄기 */
    linear-gradient(45deg,  transparent 46%, rgba(255,240,180,.4) 50%, transparent 54%),
    linear-gradient(135deg, transparent 46%, rgba(255,240,180,.4) 50%, transparent 54%);
  animation: 바닐라별빛 9s linear infinite;
  pointer-events: none;
}
@keyframes 바닐라별빛 {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* ===== 몸 부품들 ===== */
.아트.퓨어바닐라 .부품 { position: absolute; }

/* 👑 별 모양 머리 장식 (뾰족뾰족 왕관) */
.아트.퓨어바닐라 .왕관 {
  left: 50%; top: 4%;
  width: 58%; height: 30%;
  transform: translateX(-50%);
  background: linear-gradient(170deg, #fff4c8, #ffd061 60%, #d89a2a);
  clip-path: polygon(
    50% 0%, 61% 30%, 92% 22%, 74% 50%,
    100% 68%, 68% 70%, 72% 100%, 50% 80%,
    28% 100%, 32% 70%, 0% 68%, 26% 50%, 8% 22%, 39% 30%);
  filter: drop-shadow(0 0 7px rgba(255,220,120,.9));
  z-index: 4;
}

/* 💛 금빛 머리카락 (양옆으로 흘러내려요) */
.아트.퓨어바닐라 .머리 {
  left: 50%; top: 20%;
  width: 78%; height: 62%;
  transform: translateX(-50%);
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(165deg, #fff1bd 0%, #ffd982 42%, #e0a63c 100%);
  z-index: 1;
}
/* 머리카락 결 */
.아트.퓨어바닐라 .머리::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.5) 40%, transparent 46%),
    linear-gradient(80deg,  transparent 56%, rgba(255,255,255,.4) 62%, transparent 68%);
}

/* 🙂 얼굴 */
.아트.퓨어바닐라 .얼굴판 {
  left: 50%; top: 30%;
  width: 50%; height: 44%;
  transform: translateX(-50%);
  border-radius: 46% 46% 50% 50%;
  background: linear-gradient(170deg, #fbe6c2, #edc890);
  z-index: 2;
}

/* 😊 눈 두 개 */
.아트.퓨어바닐라 .눈 {
  top: 45%;
  width: 9%; height: 11%;
  border-radius: 50%;
  background: #6b4526;
  z-index: 3;
  animation: 바닐라눈깜빡 4.5s infinite;
}
.아트.퓨어바닐라 .눈.왼 { left: 36%; }
.아트.퓨어바닐라 .눈.오른 { right: 36%; }
@keyframes 바닐라눈깜빡 {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.12); }
}

/* 🙂 살짝 웃는 입 */
.아트.퓨어바닐라 .입 {
  left: 50%; top: 60%;
  width: 13%; height: 7%;
  transform: translateX(-50%);
  border-bottom: 2px solid #96622f;
  border-radius: 0 0 50% 50%;
  z-index: 3;
}

/* 🧣 하얀 망토 (어깨) */
.아트.퓨어바닐라 .망토 {
  left: 50%; bottom: 0;
  width: 96%; height: 34%;
  transform: translateX(-50%);
  border-radius: 46% 46% 0 0;
  background: linear-gradient(175deg, #fffdf4, #f4e3bb 70%, #dcc08a);
  z-index: 3;
}

/* 💎 가슴의 파란 보석 (사진 속 그 보석!) */
.아트.퓨어바닐라 .보석 {
  left: 50%; bottom: 8%;
  width: 17%; height: 17%;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 22%;
  background: linear-gradient(135deg, #bfe9ff, #4aa8e8 55%, #1f6fb0);
  box-shadow: 0 0 12px rgba(120,210,255,.95);
  z-index: 5;
  animation: 보석반짝 2.2s ease-in-out infinite;
}
@keyframes 보석반짝 {
  0%, 100% { box-shadow: 0 0 10px rgba(120,210,255,.8); }
  50%      { box-shadow: 0 0 20px rgba(160,230,255,1); }
}

/* ✨ 떠다니는 작은 반짝이 3개 */
.아트.퓨어바닐라 .반짝 {
  width: 11%; height: 11%;
  background: #fff;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  filter: drop-shadow(0 0 5px #ffe98a);
  z-index: 6;
}
.아트.퓨어바닐라 .반짝.하나 { left: 8%;  top: 22%; animation: 반짝둥실 2.1s ease-in-out infinite; }
.아트.퓨어바닐라 .반짝.둘   { right: 9%; top: 34%; animation: 반짝둥실 2.7s ease-in-out infinite .4s; }
.아트.퓨어바닐라 .반짝.셋   { left: 16%; bottom: 14%; animation: 반짝둥실 2.4s ease-in-out infinite .9s; }
@keyframes 반짝둥실 {
  0%, 100% { opacity: .35; transform: scale(.65) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(180deg); }
}

/* =========================================================
   🌑 다크카카오 쿠키
   ========================================================= */
.아트.다크카카오 {
  background:
    radial-gradient(circle at 50% 22%, #4a3a58 0%, #2a2030 48%, #140d1c 100%);
}

/* 🌑 뒤에서 퍼지는 보랏빛 어둠 */
.아트.다크카카오::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(140,70,210,.55) 0%, rgba(70,30,130,.25) 40%, transparent 66%);
  animation: 카카오어둠 3s ease-in-out infinite;
  z-index: 0;
}
@keyframes 카카오어둠 {
  0%, 100% { opacity: .5; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: .95; transform: translate(-50%,-50%) scale(1.1); }
}

.아트.다크카카오 .부품 { position: absolute; }

/* 🧥 등 뒤로 펼쳐진 보라 망토 */
.아트.다크카카오 .망토뒤 {
  left: 50%; top: 24%;
  width: 104%; height: 76%;
  transform: translateX(-50%);
  border-radius: 48% 48% 30% 30%;
  background: linear-gradient(170deg, #6a3a9a 0%, #43246a 50%, #241038 100%);
  z-index: 1;
}

/* 🛡️ 왼쪽 어깨 갑옷 (뾰족) */
.아트.다크카카오 .어깨 {
  top: 50%;
  width: 26%; height: 26%;
  background: linear-gradient(160deg, #6a5a7a, #342840 60%, #1a1226);
  z-index: 5;
}
.아트.다크카카오 .어깨.왼 {
  left: 4%;
  clip-path: polygon(0% 40%, 30% 0%, 100% 18%, 100% 100%, 10% 100%);
}
.아트.다크카카오 .어깨.오른 {
  right: 4%;
  clip-path: polygon(100% 40%, 70% 0%, 0% 18%, 0% 100%, 90% 100%);
}

/* ⚔️ 손에 든 커다란 대검 (왼쪽) */
.아트.다크카카오 .대검 {
  left: 1%; top: 10%;
  width: 22%; height: 86%;
  background: linear-gradient(100deg, #d8d0e8 0%, #9a90b0 38%, #5a5070 70%, #2e2640 100%);
  clip-path: polygon(50% 0%, 86% 10%, 78% 70%, 92% 78%, 60% 100%, 40% 100%, 8% 78%, 22% 70%, 14% 10%);
  filter: drop-shadow(0 0 7px rgba(160,90,232,.85));
  z-index: 8;
}
/* 칼날 가운데 보라 홈 */
.아트.다크카카오 .대검::after {
  content: "";
  position: absolute;
  left: 50%; top: 8%;
  width: 22%; height: 58%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #e0bfff, #8a4ad0);
  box-shadow: 0 0 8px #c88aff;
}

/* 🛡️ 손에 든 커다란 방패 (오른쪽) */
.아트.다크카카오 .방패 {
  right: 0%; top: 22%;
  width: 38%; height: 62%;
  background:
    /* 은빛 테두리 */
    linear-gradient(150deg, #e8e4f0 0%, #a8a0bc 30%, #4a4060 70%, #241c34 100%);
  clip-path: polygon(50% 0%, 100% 20%, 100% 70%, 50% 100%, 0% 70%, 0% 20%);
  filter: drop-shadow(0 0 9px rgba(160,90,232,.9));
  z-index: 8;
  animation: 방패둥실 3s ease-in-out infinite;
}
@keyframes 방패둥실 {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  50%      { transform: translateY(-6%) rotate(6deg); }
}
/* 방패 가운데 보라 다이아 무늬 */
.아트.다크카카오 .방패::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 46%; height: 46%;
  transform: translate(-50%,-50%) rotate(45deg);
  background: linear-gradient(135deg, #e0bfff, #a05ae8 60%, #5a1fb0);
  box-shadow: 0 0 10px rgba(200,138,255,.9);
}

/* 🖤 길게 늘어진 검은 머리 */
.аrt-없음11 {}
.아트.다크카카오 .머리 {
  left: 50%; top: 16%;
  width: 56%; height: 72%;
  transform: translateX(-50%);
  border-radius: 50% 50% 34% 34%;
  background: linear-gradient(165deg, #3a2e48 0%, #241a32 45%, #120b1a 100%);
  z-index: 2;
}

/* 🤎 진한 초코 얼굴 */
.аrt-없음12 {}
.аrt-없음13 {}
.аrt-없음14 {}
.аrt-없음15 {}
.аrt-없음16 {}
.아트.다크카카오 .얼굴판 {
  left: 50%; top: 32%;
  width: 36%; height: 34%;
  transform: translateX(-50%);
  border-radius: 44% 44% 50% 50%;
  background: linear-gradient(170deg, #6b4c40, #46302a);
  z-index: 3;
}

/* 💇 얼굴 위로 내려온 앞머리 */
.аrt-없음17 {}
.аrt-없음18 {}
.аrt-없음19 {}
.аrt-없음20 {}
.아트.다크카카오 .앞머리 {
  left: 50%; top: 30%;
  width: 40%; height: 14%;
  transform: translateX(-50%);
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(175deg, #2e2340, #19101f);
  z-index: 4;
}

/* 😠 빛나는 보라색 눈 */
.аrt-없음21 {}
.아트.다크카카오 .눈 {
  top: 42%;
  width: 7%; height: 5%;
  border-radius: 40%;
  background: #e0bfff;
  box-shadow: 0 0 8px #c88aff, 0 0 15px rgba(160,90,232,.9);
  z-index: 5;
  animation: 카카오눈빛 2.4s ease-in-out infinite;
}
.аrt-없음22 {}
.아트.다크카카오 .눈.왼 { left: 39%; }
.아트.다크카카오 .눈.오른 { right: 39%; }
@keyframes 카카오눈빛 {
  0%, 100% { box-shadow: 0 0 7px #c88aff, 0 0 13px rgba(160,90,232,.7); }
  50%      { box-shadow: 0 0 13px #f0dcff, 0 0 24px rgba(200,138,255,1); }
}

/* 😐 굳게 다문 입 */
.аrt-없음23 {}
.аrt-없음24 {}
.아트.다크카카오 .입 {
  left: 50%; top: 56%;
  width: 9%; height: 0;
  transform: translateX(-50%);
  border-bottom: 2px solid #2a1a18;
  z-index: 5;
}

/* 👑 뾰족뾰족한 검은 뿔 투구 */
.аrt-없음25 {}
.아트.다크카카오 .투구 {
  left: 50%; top: 4%;
  width: 62%; height: 32%;
  transform: translateX(-50%);
  background: linear-gradient(170deg, #5a4a6a, #2e2338 55%, #171022);
  clip-path: polygon(
    50% 26%, 56% 4%, 62% 24%, 76% 2%,
    78% 30%, 94% 20%, 86% 52%, 100% 66%,
    100% 100%, 0% 100%, 0% 66%, 14% 52%,
    6% 20%, 22% 30%, 24% 2%, 38% 24%, 44% 4%);
  filter: drop-shadow(0 0 8px rgba(160,90,232,.85));
  z-index: 7;
}

/* 🥋 가슴 갑옷 */
.аrt-없음26 {}
.аrt-없음27 {}
.아트.다크카카오 .갑옷 {
  left: 50%; bottom: 0;
  width: 44%; height: 30%;
  transform: translateX(-50%);
  border-radius: 34% 34% 0 0;
  background: linear-gradient(175deg, #4a3a5a, #281e36 60%, #140d1c);
  z-index: 5;
}
/* 💜 가슴 보석 */
.аrt-없음28 {}
.аrt-없음29 {}
.아트.다크카카오 .갑옷::after {
  content: "";
  position: absolute;
  left: 50%; top: 24%;
  width: 36%; height: 36%;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #e0bfff, #a05ae8 55%, #5a1fb0);
  box-shadow: 0 0 11px rgba(200,138,255,.95);
  animation: 어둠보석 2.2s ease-in-out infinite;
}
@keyframes 어둠보석 {
  0%, 100% { box-shadow: 0 0 9px rgba(200,138,255,.8); }
  50%      { box-shadow: 0 0 20px rgba(224,191,255,1); }
}

/* 🎨 CSS 그림은 얼굴 칸에 꽉 차게! (이모지 글자 크기 영향 없애기) */
.얼굴 .아트, .큰얼굴 .아트 { font-size: 0; }

/* =========================================================
   🔒 레벨로 열리는 스킬 판
   ========================================================= */
.스킬판.잠김 {
  background: rgba(120,120,140,.15);
  border-color: rgba(255,255,255,.2);
  opacity: .65;
}
.스킬판.잠김 .스킬머리 { color: #9aa8bb; }
.스킬판.열림 {
  background: rgba(255,211,77,.16);
  border-color: rgba(255,223,106,.6);
}
.스킬판.열림 .스킬머리 { color: #ffdf6a; }

/* =========================================================
   🦸 히어로 등급 — 특별한 금빛 테두리
   ========================================================= */
.카드[data-등급="히어로"],
.결과카드[data-등급="히어로"],
.자세히판[data-등급="히어로"] {
  animation: 히어로테 2.2s ease-in-out infinite;
}
@keyframes 히어로테 {
  0%, 100% { border-color: #ffdf6a; box-shadow: 0 0 26px #ffdf6a; }
  50%      { border-color: #fff8d0; box-shadow: 0 0 46px #ffe98a; }
}
.카드[data-등급="히어로"]::after {
  content: "🦸";
  position: absolute; bottom: 8px; left: 10px;
  font-size: 18px;
  animation: 둥실 1.8s ease-in-out infinite;
}