/* 🐆 오셀로틀 새 디자인 — 재규어·사자·늑대를 섞은 거대 수인 전사 (멕시코)
   tremi.css 다음에 불러와서 오셀로틀만 새로 그려요. */

.오셀로틀 {
  position: relative; width: 300px; height: 350px; margin: 6px auto;
  animation: 수인숨쉬기 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 18px #17b8b0);
}

@keyframes 수인숨쉬기 {
  0%, 100% { transform: rotate(-3deg) translateY(0) scale(1); }
  50% { transform: rotate(-1deg) translateY(-8px) scale(1.02); }
}

/* ===== 🧥 검푸른 망토 (안쪽은 검붉은색) ===== */
.오셀로틀 .망토뒤 {
  position: absolute; top: 96px; left: 50%; transform: translateX(-50%);
  width: 262px; height: 234px; z-index: 0;
  background: linear-gradient(#1b2a63, #0b1436);
  border: 4px solid #060b22;
  clip-path: polygon(10% 0, 90% 0, 100% 70%, 88% 100%, 74% 76%, 60% 100%, 46% 74%, 32% 100%, 16% 74%, 0 96%);
  animation: 망토출렁 3.4s ease-in-out infinite;
}

@keyframes 망토출렁 {
  0%, 100% { transform: translateX(-50%) skewX(-2deg); }
  50% { transform: translateX(-50%) skewX(2deg); }
}

.오셀로틀 .망토안 {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 190px; height: 190px;
  background: linear-gradient(#7d1225, #4a0713);
  clip-path: polygon(8% 0, 92% 0, 100% 72%, 84% 100%, 66% 74%, 50% 100%, 34% 74%, 16% 100%, 0 72%);
}

/* ===== 🔥 커다란 갈기 (흰·빨강·주황·청록·짙은 녹색) ===== */
.오셀로틀 .갈기 { position: absolute; top: 118px; left: 50%; width: 0; height: 0; z-index: 1; }

.오셀로틀 .갈기털 {
  position: absolute; left: -15px; top: -140px;
  width: 30px; height: 140px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: 50% 100%;
  animation: 갈기떨림 2.6s ease-in-out infinite;
}

@keyframes 갈기떨림 {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

.오셀로틀 .털1  { background: #ffffff; transform: rotate(-108deg); }
.오셀로틀 .털2  { background: #e63946; transform: rotate(-90deg); animation-delay: .1s; }
.오셀로틀 .털3  { background: #ff8c1a; transform: rotate(-72deg); animation-delay: .2s; }
.오셀로틀 .털4  { background: #17b8b0; transform: rotate(-56deg); animation-delay: .3s; }
.오셀로틀 .털5  { background: #ffffff; transform: rotate(-40deg); animation-delay: .4s; }
.오셀로틀 .털6  { background: #0f6b5c; transform: rotate(-24deg); animation-delay: .5s; }
.오셀로틀 .털7  { background: #e63946; transform: rotate(-8deg); animation-delay: .6s; }
.오셀로틀 .털8  { background: #ffffff; transform: rotate(8deg); animation-delay: .5s; }
.오셀로틀 .털9  { background: #ff8c1a; transform: rotate(24deg); animation-delay: .4s; }
.오셀로틀 .털10 { background: #17b8b0; transform: rotate(40deg); animation-delay: .3s; }
.오셀로틀 .털11 { background: #0f6b5c; transform: rotate(56deg); animation-delay: .2s; }
.오셀로틀 .털12 { background: #e63946; transform: rotate(72deg); animation-delay: .1s; }
.오셀로틀 .털13 { background: #ff8c1a; transform: rotate(90deg); }
.오셀로틀 .털14 { background: #ffffff; transform: rotate(108deg); animation-delay: .2s; }

/* ===== 🐺 야수 머리 ===== */
.오셀로틀 .야수머리 {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  width: 152px; height: 136px; z-index: 4;
  background: linear-gradient(#ffffff, #dfe4e4);
  border: 4px solid #8f9a9a; border-radius: 48% 48% 44% 44%;
}

/* 뾰족한 귀 */
.오셀로틀 .야수귀 {
  position: absolute; top: -34px; width: 0; height: 0;
  border-left: 20px solid transparent; border-right: 20px solid transparent;
  border-bottom: 44px solid #ffffff;
  filter: drop-shadow(0 -2px 0 #8f9a9a);
}
.오셀로틀 .왼귀 { left: 6px; transform: rotate(-16deg); }
.오셀로틀 .오른귀 { right: 6px; transform: rotate(16deg); }

.오셀로틀 .귀속 {
  position: absolute; top: 16px; left: -10px;
  width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 24px solid #e63946;
}

/* 얼굴 문양 (민속 가면 느낌) */
.오셀로틀 .눈썹문양 { position: absolute; top: 24px; width: 44px; height: 10px; border-radius: 999px; }
.오셀로틀 .왼눈썹문 { left: 12px; background: #e63946; transform: rotate(-14deg); }
.오셀로틀 .오른눈썹문 { right: 12px; background: #ff8c1a; transform: rotate(14deg); }

.오셀로틀 .눈 {
  position: absolute; top: 44px; width: 30px; height: 22px; z-index: 5;
  border-radius: 60% 60% 45% 45%;
}
.오셀로틀 .왼눈 { left: 18px; background: radial-gradient(#bffcf7, #17b8b0 60%, #0a4f4a); box-shadow: 0 0 16px #17b8b0; }
.오셀로틀 .오른눈 { right: 18px; background: radial-gradient(#ffe3a8, #ff8c1a 60%, #a33d00); box-shadow: 0 0 14px #ff8c1a; }
.오셀로틀 .눈빛 { position: absolute; top: 4px; left: 6px; width: 8px; height: 8px; background: #fff; border-radius: 50%; }

.오셀로틀 .볼문양 { position: absolute; top: 72px; width: 26px; height: 26px; border: 5px solid #17b8b0; border-radius: 50%; }
.오셀로틀 .왼볼문 { left: 4px; }
.오셀로틀 .오른볼문 { right: 4px; border-color: #e63946; }

/* 튀어나온 주둥이 + 흰 털 */
.오셀로틀 .주둥이 {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 74px; z-index: 6;
  background: linear-gradient(#ffffff, #eceff0);
  border: 4px solid #8f9a9a; border-radius: 44% 44% 52% 52%;
}

.오셀로틀 .수염털 {
  position: absolute; bottom: -6px; left: -12px; width: 128px; height: 34px;
  background: #ffffff; border: 4px solid #cdd4d4;
  border-radius: 50%; z-index: -1;
}

.오셀로틀 .코 {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 22px; background: #2b1a1a; border-radius: 45% 45% 60% 60%;
}

.오셀로틀 .입 {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 22px; background: #5c1526;
  border-radius: 8px 8px 26px 26px;
}

.오셀로틀 .송곳니 {
  position: absolute; top: 0; width: 12px; height: 18px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.오셀로틀 .송1 { left: 4px; }
.오셀로틀 .송2 { left: 24px; height: 14px; }
.오셀로틀 .송3 { right: 24px; height: 14px; }
.오셀로틀 .송4 { right: 4px; }

/* ===== 💪 몸통 (청록 전사복) ===== */
.오셀로틀 .몸통 {
  position: absolute; top: 168px; left: 50%; transform: translateX(-50%);
  width: 168px; height: 132px; z-index: 3;
  background: linear-gradient(#17b8b0, #0d5f63);
  border: 5px solid #073a3f; border-radius: 40px 40px 22px 22px;
}

.오셀로틀 .어깨천 {
  position: absolute; top: -14px; left: -14px; width: 196px; height: 44px;
  background: linear-gradient(#0f8a86, #084a4e);
  border: 4px solid #073a3f; border-radius: 30px 30px 46px 46px;
}

.오셀로틀 .몸점 { position: absolute; background: #7ff3ea; border-radius: 50%; opacity: .8; }
.오셀로틀 .점가 { top: 44px; left: 20px; width: 16px; height: 11px; }
.오셀로틀 .점나 { top: 70px; left: 34px; width: 12px; height: 9px; }
.오셀로틀 .점다 { top: 96px; left: 18px; width: 18px; height: 10px; }
.오셀로틀 .점라 { top: 48px; right: 22px; width: 14px; height: 10px; }
.오셀로틀 .점마 { top: 78px; right: 34px; width: 18px; height: 11px; }
.오셀로틀 .점바 { top: 102px; right: 20px; width: 12px; height: 9px; }

.오셀로틀 .가슴장식 {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px; z-index: 4;
  background: radial-gradient(#ffe9a8, #ffb300 60%, #a86a00);
  border: 4px solid #6b4200; border-radius: 50%;
  box-shadow: 0 0 16px #ffb300;
  animation: 장식빛 2s ease-in-out infinite;
}

@keyframes 장식빛 {
  0%, 100% { box-shadow: 0 0 10px #ffb300; }
  50% { box-shadow: 0 0 24px #ffe9a8; }
}

/* 허리 회색 갑옷판 */
.오셀로틀 .허리갑옷 {
  position: absolute; top: 286px; left: 50%; transform: translateX(-50%);
  width: 176px; z-index: 5;
}
.오셀로틀 .갑옷판 {
  height: 14px; margin-bottom: 3px;
  background: linear-gradient(#c3ccd2, #7d8890);
  border: 3px solid #4c565e; border-radius: 999px;
}
.오셀로틀 .판2 { width: 92%; margin-left: 4%; }
.오셀로틀 .판3 { width: 80%; margin-left: 10%; }

/* ===== 🦾 굵은 팔 ===== */
.오셀로틀 .팔 {
  position: absolute; top: 186px; width: 44px; height: 108px; z-index: 2;
  background: linear-gradient(#17b8b0, #0d5f63);
  border: 4px solid #073a3f; border-radius: 24px;
}
.오셀로틀 .왼팔 { left: 6px; transform: rotate(12deg); }
.오셀로틀 .오른팔 { right: -6px; transform: rotate(-28deg); z-index: 6; }

.오셀로틀 .붕대 {
  position: absolute; left: -4px; width: 52px; height: 12px;
  background: #8a6a45; border: 2px solid #4b3521; border-radius: 999px;
}
.오셀로틀 .붕1 { top: 52px; }
.오셀로틀 .붕2 { top: 68px; background: #9aa3a8; border-color: #4c565e; }
.오셀로틀 .붕3 { top: 84px; }

.오셀로틀 .야수손 {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 42px;
  background: linear-gradient(#ffffff, #dfe4e4);
  border: 4px solid #8f9a9a; border-radius: 20px 20px 26px 26px;
}

.오셀로틀 .발톱 {
  position: absolute; bottom: -10px; width: 10px; height: 14px; background: #fff;
  border: 2px solid #8f9a9a; border-radius: 0 0 60% 60%;
}
.오셀로틀 .톱1 { left: 4px; }
.오셀로틀 .톱2 { left: 20px; }
.오셀로틀 .톱3 { right: 4px; }

/* ===== 🦵 다리 ===== */
.오셀로틀 .다리 {
  position: absolute; bottom: 0; width: 46px; height: 62px; z-index: 2;
  background: linear-gradient(#0f8a86, #084a4e);
  border: 4px solid #073a3f; border-radius: 16px 16px 10px 10px;
}
.오셀로틀 .왼다리 { left: 78px; }
.오셀로틀 .오른다리 { right: 74px; }

.오셀로틀 .야수발 {
  position: absolute; bottom: -8px; left: -10px;
  width: 62px; height: 20px;
  background: #ffffff; border: 4px solid #8f9a9a; border-radius: 999px;
}

/* 축제 느낌 반짝임 */
.오셀로틀 .불꽃 { position: absolute; font-size: 24px; z-index: 7; animation: 불꽃깜빡 1.8s ease-in-out infinite; }
.오셀로틀 .불1 { top: 30px; left: 6px; }
.오셀로틀 .불2 { top: 120px; right: 0; animation-delay: .6s; }
.오셀로틀 .불3 { bottom: 40px; left: 0; animation-delay: 1.2s; }

@keyframes 불꽃깜빡 {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 820px) {
  .오셀로틀 { transform: scale(0.74); }
}