/* 💚 힐러 · 💪 버퍼 · 🏅 새 등급(슈퍼에픽 · 비스트) 꾸미기 */

/* 역할 고르는 버튼 */
.역할칸 {
  font-size: 18px;
  font-weight: bold;
  color: #3a2214;
  background: #fff3e0;
  border: 3px solid transparent;
  border-radius: 16px;
  padding: 10px 16px;
  cursor: pointer;
  line-height: 1.3;
}

.역할칸 small {
  display: block;
  font-size: 13px;
  color: #6b5344;
  font-weight: normal;
}

.역할칸.고름 {
  border-color: #b5477a;
  background: #ffe0f0;
  transform: scale(1.05);
}

/* 카드 위 역할 딱지 */
.역할딱지 {
  display: inline-block;
  background: #ff9f68;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 999px;
  padding: 4px 12px;
  margin: 4px 2px;
}

.역할딱지.힐러딱지 { background: #2c9e5b; }
.역할딱지.버퍼딱지 { background: #8a4dd8; }

/* 쿠키 옆에 떠 있는 역할 표시 */
.쿠키몸 .역할표시 {
  position: absolute;
  right: -14px;
  top: 6px;
  font-size: 22px;
  z-index: 4;
  animation: 둥실 2s ease-in-out infinite;
}

@keyframes 둥실 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 회복 숫자는 초록색 */
.데미지글.회복 {
  color: #2c9e5b;
  font-size: 30px;
}

/* 버프 글자는 보라색 */
.데미지글.버프 {
  color: #8a4dd8;
  font-size: 24px;
}

/* 회복 받을 때 초록 빛 */
.회복빛 {
  box-shadow: 0 0 26px #7ee08f;
  border-color: #2c9e5b !important;
}

/* 버프 받을 때 보라 빛 */
.버프빛 {
  box-shadow: 0 0 26px #c79bff;
  border-color: #8a4dd8 !important;
}

/* 힐러·버퍼가 기술을 쓸 때 살짝 뛰어요 */
.회복동작 { animation: 회복점프 0.7s ease-out; }

@keyframes 회복점프 {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-16px) scale(1.06); }
}

/* 지금 걸린 버프 표시 줄 */
.버프줄 {
  font-size: 15px;
  font-weight: bold;
  color: #8a4dd8;
  min-height: 20px;
  margin: 4px 0 0;
}

.버프알 {
  display: inline-block;
  background: #f1e5ff;
  border: 2px solid #8a4dd8;
  border-radius: 999px;
  padding: 2px 8px;
  margin: 2px;
}

/* 행동 버튼 색 */
.행동버튼.회복 { background: #2c9e5b; }
.행동버튼.버프 { background: #8a4dd8; }

/* ===== 🏅 새 등급 색 ===== */

/* 슈퍼에픽 — 에픽보다 반짝이는 보라 */
.등급-슈퍼에픽 { background: linear-gradient(90deg, #8a4dd8, #d46bff); }
.테두리-슈퍼에픽 { border-color: #b06bff; box-shadow: 0 0 16px #d9a8ff; }

/* 비스트 — 최강! 무섭게 반짝여요 🐲 */
.등급-비스트 {
  background: linear-gradient(90deg, #1b1b2f, #7b2ff7, #ff2e63, #1b1b2f);
  text-shadow: 0 0 6px #ffffff;
}

.테두리-비스트 {
  border-color: #7b2ff7;
  box-shadow: 0 0 26px #ff2e63, inset 0 0 14px #d9a8ff;
  animation: 비스트빛 2s ease-in-out infinite;
}

@keyframes 비스트빛 {
  0%, 100% { box-shadow: 0 0 20px #7b2ff7, inset 0 0 10px #d9a8ff; }
  50% { box-shadow: 0 0 32px #ff2e63, inset 0 0 16px #ffb3c8; }
}