/* 📸 소맥거핀 찰칵! 세계여행 — 스테이지 = 렌디온 요원 하나! */

body {
  margin: 0; padding: 18px;
  font-family: "맑은 고딕", sans-serif;
  background: linear-gradient(#0b1026, #23306b 60%, #3fc1e0);
  color: #fff; text-align: center;
}

h1 { font-size: 34px; text-shadow: 3px 3px 0 #2f6fd0; margin: 6px 0; }
.설명 { font-size: 18px; }


.숨김 { display: none !important; }

/* 점수판 */
.점수판 { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; }

.점수판 span {
  background: #fff; color: #12204a;
  border: 4px solid #62e6ff; border-radius: 999px;
  padding: 8px 16px; font-size: 19px; font-weight: bold;
}

.게임판 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; }

.스테이지카드 {
  background: rgba(255, 255, 255, 0.94); color: #12204a;
  border: 8px solid #ffd93d; border-radius: 26px;
  padding: 20px 26px; width: 340px;
}

.나라깃발 { font-size: 76px; line-height: 1; }
.스테이지카드 h2 { font-size: 30px; margin: 6px 0; }
.보스이름 { font-size: 21px; font-weight: bold; color: #b52f5a; margin: 4px 0; }
.보스설명 { font-size: 17px; margin: 4px 0 14px; }

.옆판 { width: 280px; background: rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 12px; }

/* 🧑 트레미 */
.트레미상자 { padding: 6px; }

.트레미 {
  position: relative; width: 150px; height: 190px; margin: 0 auto;
  animation: 둥실 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 14px #62e6ff);
}

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

.트레미 .머리 {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 104px; height: 96px;
  background: linear-gradient(#dff6ff, #a9e6ff);
  border: 4px solid #4fc9f5; border-radius: 50% 50% 46% 46%;
}

.트레미 .앞머리 {
  position: absolute; top: -6px; left: -4px; width: 104px; height: 40px;
  background: #5ad0ff; border-radius: 50% 50% 40% 40%;
}

.트레미 .눈 {
  position: absolute; top: 46px; width: 16px; height: 20px;
  background: #16324f; border-radius: 50%; animation: 눈깜빡 4s infinite;
}

.트레미 .왼눈 { left: 22px; }
.트레미 .오른눈 { right: 22px; }

@keyframes 눈깜빡 { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

.트레미 .볼 { position: absolute; top: 66px; width: 16px; height: 9px; background: #ff9ec0; border-radius: 50%; opacity: 0.85; }
.트레미 .왼볼 { left: 12px; }
.트레미 .오른볼 { right: 12px; }

.트레미 .입 {
  position: absolute; top: 68px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 12px; border-bottom: 4px solid #16324f; border-radius: 0 0 20px 20px;
}

.트레미 .별핀 { position: absolute; top: -14px; right: -6px; font-size: 22px; }

.트레미 .몸 {
  position: absolute; top: 92px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 72px;
  background: linear-gradient(#7ee0ff, #4fa8f5);
  border: 4px solid #4fc9f5; border-radius: 26px 26px 20px 20px;
}

.트레미 .가슴별 { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: 22px; color: #fff; }

.트레미 .팔 {
  position: absolute; top: 10px; width: 16px; height: 46px;
  background: #a9e6ff; border: 3px solid #4fc9f5; border-radius: 12px;
}

.트레미 .왼팔 { left: -20px; transform: rotate(12deg); }
.트레미 .오른팔 { right: -20px; transform: rotate(-12deg); }

.트레미 .빛받침 {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 22px;
  background: radial-gradient(#62e6ff, transparent 70%);
  border-radius: 50%; animation: 빛깜빡 1.6s infinite;
}

@keyframes 빛깜빡 { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.말풍선 {
  background: #fff; color: #12204a; font-size: 16px; font-weight: bold;
  border: 4px solid #62e6ff; border-radius: 16px; padding: 10px; margin-top: 10px;
}

/* 버튼 */
button {
  font-size: 22px; font-weight: bold; font-family: inherit;
  color: #fff; background: #2f6fd0; border: none; border-radius: 999px;
  padding: 14px 24px; margin: 5px; cursor: pointer; box-shadow: 0 5px 0 #1a4f8a;
}

button:active { transform: translateY(4px); box-shadow: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.작은 { font-size: 15px; padding: 8px 14px; background: #6b5f8a; box-shadow: 0 4px 0 #3d3554; }

/* ⚔️ 대결 창 */
.대결막 {
  position: fixed; inset: 0; background: rgba(10, 12, 30, 0.88);
  display: none; align-items: center; justify-content: center; z-index: 20; overflow-y: auto;
}

.대결막.보임 { display: flex; }

.대결창 {
  background: #fff; color: #12204a; border-radius: 24px; padding: 18px;
  max-width: 520px; border: 8px solid #ff3d6b; margin: 12px;
}

.대결창 h2 { font-size: 26px; margin: 4px 0; }

.보스대사 {
  font-size: 18px; font-weight: bold; color: #b52f5a;
  background: #fff0f4; border-radius: 14px; padding: 8px; margin: 6px 0;
}

/* ===== 🐂 옐 토르 ===== */
.옐토르 { position: relative; width: 210px; height: 230px; margin: 4px auto; animation: 플라멩코 0.9s ease-in-out infinite; }

@keyframes 플라멩코 {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-8px); }
}

.옐토르 .토르머리 {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 104px; background: linear-gradient(#a5673f, #7d4a2a);
  border: 4px solid #5c3419; border-radius: 50% 50% 44% 44%; z-index: 2;
}

.옐토르 .토르뿔 { position: absolute; top: 6px; width: 46px; height: 30px; border: 8px solid #f4e2c0; border-bottom: none; z-index: 1; }
.옐토르 .토르뿔.왼뿔 { left: 24px; border-radius: 40px 0 0 0; transform: rotate(-16deg); }
.옐토르 .토르뿔.오른뿔 { right: 24px; border-radius: 0 40px 0 0; transform: rotate(16deg); }

.옐토르 .토르귀 { position: absolute; top: 34px; width: 34px; height: 22px; background: #8a5330; border: 3px solid #5c3419; border-radius: 50%; }
.옐토르 .토르귀.왼귀 { left: -28px; transform: rotate(-18deg); }
.옐토르 .토르귀.오른귀 { right: -28px; transform: rotate(18deg); }

.옐토르 .토르눈 { position: absolute; top: 34px; width: 16px; height: 18px; background: #1c1008; border-radius: 50%; }
.옐토르 .토르눈.왼눈 { left: 24px; }
.옐토르 .토르눈.오른눈 { right: 24px; }

.옐토르 .주둥이 {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 46px; background: #e8c39a; border: 3px solid #5c3419; border-radius: 40% 40% 50% 50%;
}

.옐토르 .콧구멍 { position: absolute; top: 12px; width: 12px; height: 15px; background: #5c3419; border-radius: 50%; }
.옐토르 .콧구멍.왼콧 { left: 14px; }
.옐토르 .콧구멍.오른콧 { right: 14px; }

.옐토르 .장미 { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: 3; animation: 장미흔들 0.9s ease-in-out infinite; }

@keyframes 장미흔들 {
  0%, 100% { transform: translateX(-50%) rotate(-14deg); }
  50% { transform: translateX(-50%) rotate(14deg); }
}

.옐토르 .토르몸 {
  position: absolute; top: 120px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 82px; background: linear-gradient(#e02b40, #9c0f22);
  border: 4px solid #6d0a18; border-radius: 30px 30px 16px 16px;
}

.옐토르 .프릴 {
  position: absolute; bottom: -6px; left: -10px; width: 124px; height: 26px;
  background: repeating-linear-gradient(90deg, #ff5f7e 0 14px, #ffd93d 14px 28px);
  border-radius: 0 0 18px 18px;
}

.옐토르 .토르팔 { position: absolute; top: 6px; width: 18px; height: 54px; background: #a5673f; border: 3px solid #5c3419; border-radius: 12px; }
.옐토르 .토르팔.왼팔 { left: -22px; animation: 팔짝 0.9s infinite; }
.옐토르 .토르팔.오른팔 { right: -22px; animation: 팔짝 0.9s infinite 0.45s; }

@keyframes 팔짝 { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-60deg); } }

.옐토르 .토르다리 { position: absolute; bottom: 0; width: 20px; height: 34px; background: #7d4a2a; border: 3px solid #5c3419; border-radius: 10px 10px 14px 14px; }
.옐토르 .토르다리.왼다리 { left: 62px; }
.옐토르 .토르다리.오른다리 { right: 62px; }

/* ===== 🐉 펜드래곤 ===== */
.펜드래곤 { position: relative; width: 260px; height: 250px; margin: 4px auto; animation: 용숨쉬기 2s ease-in-out infinite; filter: drop-shadow(0 0 14px #4fa8f5); }

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

.펜드래곤 .용날개 {
  position: absolute; top: 60px; width: 84px; height: 96px;
  background: linear-gradient(#4a7fd0, #23407e); border: 4px solid #16274f;
  animation: 날개짓 1.6s ease-in-out infinite;
}

.펜드래곤 .왼날개 { left: -18px; clip-path: polygon(100% 0, 0 20%, 30% 45%, 0 60%, 35% 78%, 10% 100%, 100% 100%); }
.펜드래곤 .오른날개 { right: -18px; clip-path: polygon(0 0, 100% 20%, 70% 45%, 100% 60%, 65% 78%, 90% 100%, 0 100%); animation-delay: 0.3s; }

@keyframes 날개짓 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.86); } }

.펜드래곤 .용머리 {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 86px; background: linear-gradient(#6fa8e8, #3a6bc0);
  border: 4px solid #16274f; border-radius: 48% 48% 40% 40%; z-index: 3;
}

.펜드래곤 .용뿔 { position: absolute; top: -26px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #dfe9ff; }
.펜드래곤 .왼용뿔 { left: 12px; transform: rotate(-20deg); }
.펜드래곤 .오른용뿔 { right: 12px; transform: rotate(20deg); }

.펜드래곤 .용눈 { position: absolute; top: 26px; width: 20px; height: 14px; background: #ffd93d; border-radius: 60% 60% 40% 40%; box-shadow: 0 0 10px #ffd93d; }
.펜드래곤 .왼용눈 { left: 14px; transform: rotate(-12deg); }
.펜드래곤 .오른용눈 { right: 14px; transform: rotate(12deg); }

.펜드래곤 .용주둥이 {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 66px; height: 34px; background: #8fc2f5; border: 4px solid #16274f; border-radius: 30% 30% 45% 45%;
}

.펜드래곤 .용이빨 {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 12px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 70% 10%, 50% 100%, 30% 10%, 12% 100%);
}

.펜드래곤 .용몸 {
  position: absolute; top: 86px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 120px; background: linear-gradient(#3f6fc4, #1d3573);
  border: 5px solid #16274f; border-radius: 34px 34px 24px 24px; z-index: 2;
}

.펜드래곤 .갑옷무늬 {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 78px;
  background: repeating-linear-gradient(180deg, #6f9ee8 0 10px, #3f6fc4 10px 20px);
  border: 3px solid #16274f; border-radius: 14px;
}

.펜드래곤 .엑스칼리버 { position: absolute; top: 40px; right: -30px; z-index: 4; transform: rotate(18deg); animation: 검빛 1.4s infinite; }

@keyframes 검빛 {
  0%, 100% { filter: drop-shadow(0 0 6px #cfe6ff); }
  50% { filter: drop-shadow(0 0 18px #ffffff); }
}

.펜드래곤 .칼날 {
  width: 20px; height: 130px; background: linear-gradient(#ffffff, #b9d8ff);
  border: 3px solid #6f8fc0; clip-path: polygon(50% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
}

.펜드래곤 .칼자루 { width: 46px; height: 14px; margin-left: -13px; background: #ffd93d; border: 3px solid #a37b00; border-radius: 6px; }

.펜드래곤 .영국방패 {
  position: absolute; top: 96px; left: -34px; z-index: 4;
  width: 68px; height: 82px; background: #f4f7ff;
  border: 5px solid #16274f; border-radius: 12px 12px 50% 50%; transform: rotate(-10deg);
}

.펜드래곤 .가로줄 { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 16px; background: #e02b40; }
.펜드래곤 .세로줄 { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 16px; height: 100%; background: #e02b40; }

.펜드래곤 .용꼬리 {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 140px; height: 24px; background: #23407e; border: 4px solid #16274f; border-radius: 999px;
}

/* ===== 🎩 뤼팽 ===== */
.뤼팽 { position: relative; width: 230px; height: 250px; margin: 4px auto; animation: 뤼팽인사 2.4s ease-in-out infinite; filter: drop-shadow(0 0 12px #d9c3ff); }

@keyframes 뤼팽인사 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-6px); }
}

.뤼팽 .실크햇 {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 84px; height: 56px; background: linear-gradient(#ffffff, #e7e7f5);
  border: 4px solid #6b6b8a; border-radius: 10px 10px 4px 4px; z-index: 4;
}

.뤼팽 .모자띠 { position: absolute; bottom: 2px; left: -4px; width: 92px; height: 14px; background: #2b2b45; }
.뤼팽 .모자챙 { position: absolute; bottom: -12px; left: -26px; width: 140px; height: 14px; background: #ffffff; border: 4px solid #6b6b8a; border-radius: 999px; }

.뤼팽 .수탉볏 {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 28px; background: #e02b40;
  clip-path: polygon(0 100%, 12% 30%, 26% 100%, 40% 10%, 55% 100%, 70% 25%, 86% 100%, 100% 45%);
}

.뤼팽 .뤼팽머리 {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 92px; background: linear-gradient(#ffffff, #e9e9f6);
  border: 4px solid #6b6b8a; border-radius: 50% 50% 46% 46%; z-index: 3;
}

.뤼팽 .고글 { position: absolute; top: 26px; width: 28px; height: 28px; background: #2b2b45; border: 4px solid #b9b9d6; border-radius: 50%; }
.뤼팽 .왼고글 { left: 8px; }
.뤼팽 .오른고글 { right: 8px; }

.뤼팽 .부리 {
  position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 60px; background: linear-gradient(#ffffff, #d8d8ec);
  border: 4px solid #6b6b8a; clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
}

.뤼팽 .턱수염깃털 { position: absolute; bottom: -46px; left: 50%; transform: translateX(-50%); width: 60px; height: 16px; background: #ffd93d; border-radius: 0 0 999px 999px; }

.뤼팽 .흰망토 {
  position: absolute; top: 138px; left: 50%; transform: translateX(-50%);
  width: 170px; height: 112px; background: linear-gradient(#ffffff, #dcdcf0);
  border: 4px solid #6b6b8a; border-radius: 40% 40% 18px 18px; z-index: 2;
}

.뤼팽 .깃 { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 80px; height: 26px; background: #2b2b45; border-radius: 0 0 40px 40px; }
.뤼팽 .단추 { position: absolute; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ffd93d; border: 2px solid #a37b00; border-radius: 50%; }
.뤼팽 .단추1 { top: 40px; }
.뤼팽 .단추2 { top: 64px; }
.뤼팽 .장갑손 { position: absolute; top: 176px; right: 16px; z-index: 5; width: 30px; height: 30px; background: #fff; border: 4px solid #6b6b8a; border-radius: 50%; }
.뤼팽 .지팡이 { position: absolute; top: 150px; right: 4px; z-index: 4; width: 8px; height: 96px; background: linear-gradient(#2b2b45, #55557a); border-radius: 4px; transform: rotate(10deg); }

/* ===== 🦊 츠네네 ===== */
.츠네네 { position: relative; width: 230px; height: 250px; margin: 4px auto; animation: 닌자흔들 2.2s ease-in-out infinite; filter: drop-shadow(0 0 12px #ffb7d5); }

@keyframes 닌자흔들 {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

.츠네네 .벚꽃잎 { position: absolute; font-size: 22px; animation: 꽃날림 3.4s linear infinite; }
.츠네네 .잎1 { top: 10px; left: 12px; }
.츠네네 .잎2 { top: 60px; right: 8px; animation-delay: 1.1s; }
.츠네네 .잎3 { top: 130px; left: 0; animation-delay: 2.2s; }

@keyframes 꽃날림 {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(90px) rotate(220deg); opacity: 0.2; }
}

.츠네네 .닌자두건 {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 70px; background: linear-gradient(#2b3350, #1a2038);
  border: 4px solid #10162b; border-radius: 54px 54px 20px 20px; z-index: 2;
}

.츠네네 .두건매듭 { position: absolute; top: 16px; right: -30px; width: 40px; height: 16px; background: #ff7fae; border: 3px solid #b8437a; border-radius: 8px; transform: rotate(-12deg); }

.츠네네 .여우가면 {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 86px; background: linear-gradient(#ffffff, #f2eee8);
  border: 4px solid #b8437a; border-radius: 50% 50% 44% 44%; z-index: 3;
}

.츠네네 .여우귀 { position: absolute; top: -26px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 30px solid #fff; }
.츠네네 .왼여우귀 { left: 4px; transform: rotate(-16deg); }
.츠네네 .오른여우귀 { right: 4px; transform: rotate(16deg); }

.츠네네 .여우눈 { position: absolute; top: 34px; width: 20px; height: 12px; background: #2b2b45; border-radius: 60% 60% 30% 30%; }
.츠네네 .왼여우눈 { left: 12px; transform: rotate(-12deg); }
.츠네네 .오른여우눈 { right: 12px; transform: rotate(12deg); }

.츠네네 .여우무늬 { position: absolute; top: 16px; width: 26px; height: 8px; background: #e0356b; border-radius: 999px; }
.츠네네 .왼무늬 { left: 8px; transform: rotate(-18deg); }
.츠네네 .오른무늬 { right: 8px; transform: rotate(18deg); }

.츠네네 .여우코 { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 26px; height: 20px; background: #e0356b; border-radius: 40% 40% 60% 60%; }

.츠네네 .닌자몸 {
  position: absolute; top: 130px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 112px; background: linear-gradient(#2b3350, #161c33);
  border: 4px solid #10162b; border-radius: 28px 28px 18px 18px; z-index: 2;
}

.츠네네 .분홍띠 { position: absolute; top: 52px; left: -6px; width: 128px; height: 18px; background: #ff7fae; border: 3px solid #b8437a; }
.츠네네 .가슴벚꽃 { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 24px; }

.츠네네 .닌자팔 { position: absolute; top: 140px; width: 20px; height: 66px; background: #2b3350; border: 3px solid #10162b; border-radius: 12px; z-index: 1; }
.츠네네 .왼닌자팔 { left: 32px; transform: rotate(16deg); }
.츠네네 .오른닌자팔 { right: 32px; transform: rotate(-16deg); }

.츠네네 .쿠나이 {
  position: absolute; top: 150px; right: 14px; z-index: 4;
  width: 10px; height: 60px; background: linear-gradient(#dfe6f5, #8b93a8);
  border: 2px solid #4b5266; border-radius: 2px 2px 50% 50%; transform: rotate(-24deg);
}

/* ===== 🦘 루루 ===== */
.루루 { position: relative; width: 240px; height: 260px; margin: 4px auto; animation: 통통 1.8s ease-in-out infinite; filter: drop-shadow(0 0 12px #ffd7a8); }

@keyframes 통통 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.루루 .캥거루귀 { position: absolute; top: 0; width: 24px; height: 56px; background: #c8813f; border: 4px solid #8a5423; border-radius: 50% 50% 30% 30%; }
.루루 .왼캥귀 { left: 74px; transform: rotate(-14deg); }
.루루 .오른캥귀 { right: 74px; transform: rotate(14deg); }

.루루 .캥거루머리 {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 82px; background: linear-gradient(#e0a05c, #c8813f);
  border: 4px solid #8a5423; border-radius: 50% 50% 44% 44%; z-index: 3;
}

.루루 .캥눈 { position: absolute; top: 30px; width: 14px; height: 16px; background: #2c1a08; border-radius: 50%; }
.루루 .왼캥눈 { left: 18px; }
.루루 .오른캥눈 { right: 18px; }
.루루 .캥볼 { position: absolute; top: 48px; width: 16px; height: 9px; background: #ff9ec0; border-radius: 50%; opacity: 0.8; }
.루루 .왼캥볼 { left: 10px; }
.루루 .오른캥볼 { right: 10px; }
.루루 .캥코 { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 22px; height: 16px; background: #2c1a08; border-radius: 50%; }

.루루 .캥거루몸 {
  position: absolute; top: 118px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 110px; background: linear-gradient(#d99553, #b06e2d);
  border: 4px solid #8a5423; border-radius: 40% 40% 30% 30%; z-index: 2;
}

.루루 .주머니 {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 54px; background: #f0c48a; border: 4px solid #8a5423;
  border-radius: 12px 12px 40px 40px; display: flex; align-items: center; justify-content: center;
}

.루루 .아기얼굴 { font-size: 30px; animation: 아기뿅 2.2s ease-in-out infinite; }

@keyframes 아기뿅 {
  0%, 100% { transform: translateY(4px) rotate(-6deg); }
  50% { transform: translateY(-4px) rotate(6deg); }
}

.루루 .캥거루팔 { position: absolute; top: 130px; width: 18px; height: 52px; background: #c8813f; border: 3px solid #8a5423; border-radius: 12px; z-index: 1; }
.루루 .왼캥팔 { left: 44px; transform: rotate(20deg); }
.루루 .오른캥팔 { right: 44px; transform: rotate(-20deg); }

.루루 .부채 { position: absolute; top: 96px; right: -6px; z-index: 4; animation: 부채질 0.8s ease-in-out infinite; transform-origin: bottom center; }

@keyframes 부채질 { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }

.루루 .부챗살 {
  width: 78px; height: 44px;
  background: repeating-linear-gradient(90deg, #ff5a8a 0 13px, #ffd93d 13px 26px);
  border: 4px solid #b52f5a; clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
}

.루루 .부채손잡이 { width: 10px; height: 26px; margin: 0 auto; background: #8a5423; border-radius: 0 0 6px 6px; }

.루루 .캥거루꼬리 { position: absolute; bottom: 6px; left: -14px; z-index: 1; width: 96px; height: 22px; background: #b06e2d; border: 4px solid #8a5423; border-radius: 999px; transform: rotate(-8deg); }
.루루 .캥거루발 { position: absolute; bottom: 0; width: 46px; height: 20px; background: #c8813f; border: 4px solid #8a5423; border-radius: 999px; }
.루루 .왼캥발 { left: 54px; }
.루루 .오른캥발 { right: 54px; }

/* ===== 🥋 아르마딜로 (브라질) ===== */
.아르마딜로 { position: relative; width: 240px; height: 250px; margin: 4px auto; animation: 삼바춤 1.1s ease-in-out infinite; filter: drop-shadow(0 0 12px #ffe680); }

@keyframes 삼바춤 {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-9px) rotate(4deg); }
}

.아르마딜로 .아르머리 {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 84px; background: linear-gradient(#b98a5e, #8f6339);
  border: 4px solid #5e3f1f; border-radius: 50% 50% 40% 40%; z-index: 3;
}

.아르마딜로 .이마갑옷 {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 24px;
  background: repeating-linear-gradient(90deg, #d8b98c 0 12px, #a8895e 12px 24px);
  border: 3px solid #5e3f1f; border-radius: 40px 40px 8px 8px;
}

.아르마딜로 .아르귀 { position: absolute; top: 8px; width: 20px; height: 34px; background: #b98a5e; border: 3px solid #5e3f1f; border-radius: 50% 50% 30% 30%; }
.아르마딜로 .왼아르귀 { left: -12px; transform: rotate(-18deg); }
.아르마딜로 .오른아르귀 { right: -12px; transform: rotate(18deg); }

.아르마딜로 .아르눈 { position: absolute; top: 34px; width: 14px; height: 14px; background: #241505; border-radius: 50%; }
.아르마딜로 .왼아르눈 { left: 20px; }
.아르마딜로 .오른아르눈 { right: 20px; }

.아르마딜로 .아르코 { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 34px; height: 24px; background: #e8c39a; border: 3px solid #5e3f1f; border-radius: 40% 40% 60% 60%; }

.아르마딜로 .아르몸 {
  position: absolute; top: 100px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 116px;
  background: linear-gradient(#ffdd33, #f2b705);
  border: 5px solid #1f7a3d; border-radius: 30px 30px 22px 22px; z-index: 2;
}

.아르마딜로 .등갑옷 { position: absolute; left: 6px; width: 108px; height: 12px; background: #d8b98c; border: 2px solid #5e3f1f; border-radius: 999px; opacity: 0.7; }
.아르마딜로 .갑옷1 { top: 10px; }
.아르마딜로 .갑옷2 { top: 30px; }
.아르마딜로 .갑옷3 { top: 50px; }

.아르마딜로 .등번호 {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 30px; font-weight: bold; color: #1f7a3d;
}

.아르마딜로 .초록띠 { position: absolute; top: 200px; left: 50%; transform: translateX(-50%); width: 140px; height: 16px; background: #1f7a3d; border: 3px solid #135227; border-radius: 999px; z-index: 3; }

.아르마딜로 .아르팔 { position: absolute; top: 112px; width: 20px; height: 60px; background: #b98a5e; border: 3px solid #5e3f1f; border-radius: 12px; z-index: 1; }
.아르마딜로 .왼아르팔 { left: 34px; animation: 팔춤 1.1s infinite; }
.아르마딜로 .오른아르팔 { right: 34px; animation: 팔춤 1.1s infinite 0.55s; }

@keyframes 팔춤 { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }

.아르마딜로 .축구공 { position: absolute; bottom: -4px; right: 6px; font-size: 40px; animation: 공튀기기 0.9s ease-in-out infinite; }

@keyframes 공튀기기 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-26px) rotate(180deg); } }

.아르마딜로 .아르꼬리 { position: absolute; bottom: 10px; left: -10px; width: 80px; height: 18px; background: #a8895e; border: 3px solid #5e3f1f; border-radius: 999px; transform: rotate(-10deg); }

/* ===== 🐆 오셀로틀 (멕시코) ===== */
.오셀로틀 { position: relative; width: 240px; height: 260px; margin: 4px auto; animation: 재규어숨 2.6s ease-in-out infinite; filter: drop-shadow(0 0 14px #ffcf6b); }

@keyframes 재규어숨 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
}

.오셀로틀 .재규어투구 {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 128px; height: 96px;
  background: linear-gradient(#e8a13c, #b86f19);
  border: 4px solid #6d3f0a; border-radius: 60px 60px 30% 30%; z-index: 4;
}

.오셀로틀 .재귀 { position: absolute; top: -18px; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 32px solid #e8a13c; }
.오셀로틀 .왼재귀 { left: 8px; transform: rotate(-14deg); }
.오셀로틀 .오른재귀 { right: 8px; transform: rotate(14deg); }

.오셀로틀 .재규어이빨 {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; background: #fff8e6;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 78% 15%, 64% 100%, 50% 15%, 36% 100%, 22% 15%, 8% 100%);
}

.오셀로틀 .점무늬 { position: absolute; width: 14px; height: 14px; border: 3px solid #6d3f0a; border-radius: 50%; }
.오셀로틀 .점1 { top: 24px; left: 18px; }
.오셀로틀 .점2 { top: 46px; left: 40px; }
.오셀로틀 .점3 { top: 26px; right: 20px; }

.오셀로틀 .오셀얼굴 {
  position: absolute; top: 76px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 76px; background: linear-gradient(#c98b52, #a06a33);
  border: 4px solid #5e3410; border-radius: 44% 44% 48% 48%; z-index: 3;
}

.오셀로틀 .오셀눈 { position: absolute; top: 26px; width: 20px; height: 12px; background: #ffe14d; border-radius: 60% 60% 30% 30%; box-shadow: 0 0 10px #ffd000; }
.오셀로틀 .왼오셀눈 { left: 8px; transform: rotate(-10deg); }
.오셀로틀 .오른오셀눈 { right: 8px; transform: rotate(10deg); }

.오셀로틀 .전사무늬 { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 46px; height: 8px; background: #7a1f1f; border-radius: 999px; }

.오셀로틀 .국장망토 {
  position: absolute; top: 136px; left: 50%; transform: translateX(-50%);
  width: 176px; height: 118px;
  background: linear-gradient(90deg, #0b7a3b 0 33%, #f6f6f6 33% 66%, #c8102e 66% 100%);
  border: 4px solid #5e3410; border-radius: 30% 30% 20px 20px; z-index: 2;
}

.오셀로틀 .망토매듭 {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; background: #ffd93d;
  border: 4px solid #8a6a00; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 5;
}

.오셀로틀 .아즈텍무늬 {
  position: absolute; bottom: 10px; left: 12px; width: 152px; height: 16px;
  background: repeating-linear-gradient(90deg, #7a1f1f 0 12px, transparent 12px 24px);
}

.오셀로틀 .오셀팔 { position: absolute; top: 150px; width: 20px; height: 64px; background: #c98b52; border: 3px solid #5e3410; border-radius: 12px; z-index: 1; }
.오셀로틀 .왼오셀팔 { left: 20px; transform: rotate(18deg); }
.오셀로틀 .오른오셀팔 { right: 20px; transform: rotate(-18deg); }

.오셀로틀 .흑요석칼 {
  position: absolute; top: 170px; right: 6px; z-index: 5;
  width: 14px; height: 74px;
  background: linear-gradient(#4b3b6b, #16101f);
  border: 3px solid #0d0812; border-radius: 3px 3px 50% 50%;
  transform: rotate(-18deg); box-shadow: 0 0 10px #7a4fd8;
}

/* ===== 🏺 파트라 (이집트) ===== */
.파트라 { position: relative; width: 240px; height: 260px; margin: 4px auto; animation: 우아하게 3s ease-in-out infinite; filter: drop-shadow(0 0 14px #ffe08a); }

@keyframes 우아하게 {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.파트라 .네메스 {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 128px; height: 96px;
  background: linear-gradient(#ffe08a, #d4a017);
  border: 4px solid #8a6a00; border-radius: 60px 60px 24% 24%; z-index: 2;
}

.파트라 .금줄무늬 {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 44px;
  background: repeating-linear-gradient(90deg, #2b6fb5 0 10px, #ffe08a 10px 20px);
  border-top: 3px solid #8a6a00;
}

.파트라 .코브라 {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 28px; z-index: 5; animation: 코브라흔들 1.8s ease-in-out infinite;
}

@keyframes 코브라흔들 {
  0%, 100% { transform: translateX(-50%) rotate(-10deg); }
  50% { transform: translateX(-50%) rotate(10deg); }
}

.파트라 .파트라얼굴 {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 84px;
  background: linear-gradient(#f0c99a, #d9a56e);
  border: 4px solid #8a5a2a; border-radius: 46% 46% 50% 50%; z-index: 3;
}

.파트라 .파눈 { position: absolute; top: 32px; width: 16px; height: 12px; background: #2b1a08; border-radius: 50%; }
.파트라 .왼파눈 { left: 12px; }
.파트라 .오른파눈 { right: 12px; }

.파트라 .아이라인 { position: absolute; top: 30px; width: 30px; height: 5px; background: #17203f; border-radius: 999px; }
.파트라 .왼라인 { left: 2px; transform: rotate(-8deg); }
.파트라 .오른라인 { right: 2px; transform: rotate(8deg); }

.파트라 .입술 { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 26px; height: 12px; background: #d62b52; border-radius: 40% 40% 60% 60%; }

.파트라 .넓은목걸이 {
  position: absolute; top: 128px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 32px;
  background: repeating-linear-gradient(90deg, #2b6fb5 0 10px, #ffd93d 10px 20px, #17a08a 20px 30px);
  border: 4px solid #8a6a00; border-radius: 8px 8px 40px 40px; z-index: 4;
}

.파트라 .목걸이보석 {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; background: #17a08a; border: 3px solid #8a6a00;
  transform: translateX(-50%) rotate(45deg);
}

.파트라 .파트라몸 {
  position: absolute; top: 148px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 108px;
  background: linear-gradient(#fff6e0, #eddcbd);
  border: 4px solid #a68a5b; border-radius: 20px 20px 16px 16px; z-index: 2;
}

.파트라 .붕대 { position: absolute; left: -4px; width: 116px; height: 12px; background: #ded0b0; border: 2px solid #b7a479; border-radius: 999px; }
.파트라 .붕대1 { top: 22px; transform: rotate(-4deg); }
.파트라 .붕대2 { top: 48px; transform: rotate(3deg); }
.파트라 .붕대3 { top: 74px; transform: rotate(-3deg); }

.파트라 .스카라베 { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-size: 26px; }

.파트라 .파팔 { position: absolute; top: 156px; width: 18px; height: 66px; background: #d9a56e; border: 3px solid #8a5a2a; border-radius: 12px; z-index: 1; }
.파트라 .왼파팔 { left: 44px; transform: rotate(20deg); }
.파트라 .오른파팔 { right: 44px; transform: rotate(-20deg); }

.파트라 .앙크지팡이 {
  position: absolute; top: 130px; right: 8px; z-index: 5;
  font-size: 46px; color: #ffd93d; text-shadow: 0 0 12px #ffb300;
}

.파트라 .모래반짝 { position: absolute; font-size: 20px; animation: 반짝임 2s ease-in-out infinite; }
.파트라 .반짝1 { top: 30px; left: 6px; }
.파트라 .반짝2 { top: 170px; left: 14px; animation-delay: 1s; }

@keyframes 반짝임 { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* ===== 🏺 함정 코스 판 ===== */
.함정상자 { margin-top: 8px; }
.함정점수 { font-size: 19px; font-weight: bold; margin-bottom: 6px; }

.코스판 {
  position: relative; max-width: 340px; height: 190px; margin: 0 auto; overflow: hidden;
  border: 5px solid #a67c00; border-radius: 14px;
}

.코스하늘 { position: absolute; inset: 0; background: linear-gradient(#ffd98a, #f7b733); }

.피라미드 {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 80px solid transparent; border-right: 80px solid transparent;
  border-bottom: 96px solid #d9a441;
}

.코스땅 {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 46px;
  background: repeating-linear-gradient(90deg, #c99a4e 0 20px, #b98a3e 20px 40px);
  border-top: 4px solid #8a6a00;
}

.함정표시 {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: 44px; opacity: 0.25; transition: opacity 0.2s, transform 0.2s;
}

.함정표시.나타남 { opacity: 1; transform: translateX(-50%) scale(1.25); }

.달리는나 {
  position: absolute; bottom: 44px; left: 6%;
  font-size: 38px; transition: left 0.4s;
}

.함정말 { font-size: 18px; font-weight: bold; color: #8a5a00; margin: 8px 0; }
.행동버튼 { font-size: 18px; padding: 10px 14px; background: #d4a017; box-shadow: 0 5px 0 #8a6a00; }

/* ===== ⚽ 페널티킥 판 ===== */
.축구상자 { margin-top: 8px; }
.축구점수 { font-size: 18px; font-weight: bold; margin-bottom: 6px; }

.축구장 {
  position: relative; max-width: 340px; height: 240px; margin: 0 auto;
  background: repeating-linear-gradient(90deg, #2f9e4f 0 34px, #34a957 34px 68px);
  border: 5px solid #135227; border-radius: 14px; overflow: hidden;
}

.골대 {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 250px; height: 100px;
  border: 8px solid #ffffff; border-bottom: none; border-radius: 6px 6px 0 0;
}

.골망 {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 14px);
}

.골키퍼 { position: absolute; bottom: 4px; left: 40%; font-size: 40px; transition: left 0.35s; }
.골키퍼.막았다 { animation: 막기 0.4s; }

@keyframes 막기 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4) rotate(14deg); } }

.공자리 { position: absolute; bottom: 10px; left: 50%; margin-left: -18px; font-size: 36px; transition: transform 0.5s ease-out; }

.슛버튼 { font-size: 18px; padding: 10px 14px; background: #f2b705; box-shadow: 0 5px 0 #a87c00; }

/* ===== 🔪 임포스터 찾기 판 ===== */
.어몽상자 { margin-top: 8px; }
.어몽점수 { font-size: 19px; font-weight: bold; }
.어몽안내글 { font-size: 17px; font-weight: bold; color: #6b2f7a; margin: 6px 0; }

.어몽판 {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: #1b1533; border: 5px solid #7a4fd8; border-radius: 16px; padding: 14px;
  max-width: 340px; margin: 0 auto;
}

.크루 {
  font-size: 34px; width: 68px; height: 78px;
  background: #2b2350; border: 4px solid #7a4fd8; border-radius: 34px 34px 12px 12px;
  box-shadow: 0 5px 0 #4a2f8a; padding: 0;
}

.크루.수상 { background: #6b1030; border-color: #ff2d55; transform: scale(1.1); }

/* ===== 🍼 키우기 판 ===== */
.다마고치상자 { margin-top: 8px; }
.키우기점수 { font-size: 19px; font-weight: bold; margin-bottom: 6px; }

.성장바 { background: #eee; border: 3px solid #8a5423; border-radius: 999px; height: 20px; overflow: hidden; margin: 0 auto 10px; max-width: 320px; }
.성장바 span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #8dffc0, #2c9e5b); transition: width 0.3s; }

.아기칸 { background: linear-gradient(#fff3dd, #ffe0b8); border: 5px solid #8a5423; border-radius: 18px; padding: 12px; max-width: 320px; margin: 0 auto; }

.요구말풍선 { background: #fff; border: 4px solid #b06e2d; border-radius: 16px; font-size: 20px; font-weight: bold; color: #7a4a12; padding: 8px; margin: 0 0 10px; }

.아기조이 { font-size: 36px; transition: font-size 0.3s; }
.아기조이.기쁨 { animation: 기쁨뿅 0.4s; }

@keyframes 기쁨뿅 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(12deg); } }

.돌봄줄 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.돌봄 { font-size: 18px; padding: 10px 14px; background: #e08a2b; box-shadow: 0 5px 0 #8a5423; }

/* ===== 🌸 개드립 피하기 판 ===== */
.피하기상자 { margin-top: 8px; }
.피하기점수 { font-size: 19px; font-weight: bold; margin-bottom: 6px; }

.피하기판 {
  position: relative; width: 100%; max-width: 340px; height: 300px; margin: 0 auto;
  background: linear-gradient(#ffe3ef, #ffd0e2);
  border: 5px solid #b8437a; border-radius: 16px; overflow: hidden;
}

.주인공 { position: absolute; bottom: 6px; left: 130px; width: 38px; height: 44px; line-height: 44px; font-size: 32px; }
.주인공.아야 { animation: 아야흔들 0.3s; }

@keyframes 아야흔들 {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px) rotate(-12deg); }
  75% { transform: translateX(8px) rotate(12deg); }
}

.떨어짐 { position: absolute; width: 36px; height: 36px; line-height: 36px; font-size: 28px; }
.개드립아이템 { background: #fff; border: 3px solid #b52f5a; border-radius: 50% 50% 50% 8px; }

/* ===== 🖼️ 명화 틀린그림찾기 ===== */
.틀린그림상자 { margin-top: 8px; }
.그림점수 { font-size: 19px; font-weight: bold; margin-bottom: 2px; }
.명화이름 { font-size: 20px; font-weight: bold; color: #6b4ea0; margin: 4px 0 8px; }
.두그림 { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.그림표 { font-size: 16px; font-weight: bold; margin: 2px; }

.명화틀 { background: linear-gradient(#d9a441, #a9761f); border: 8px solid #7a5211; border-radius: 8px; padding: 8px; }
.명화 { position: relative; width: 180px; height: 220px; overflow: hidden; background: #e9dbb8; border: 3px solid #5c4318; }

.부품 { position: absolute; }
.부품.누를수있음 { cursor: pointer; }
.부품.찾음 { outline: 5px solid #2c9e5b; outline-offset: -2px; }
.부품.틀림 { outline: 5px solid #d63b52; outline-offset: -2px; }

.모나_하늘 { top: 0; left: 0; width: 100%; height: 62%; background: linear-gradient(#cdbf95, #93a06d); }
.모나_산 { top: 26%; left: 0; width: 100%; height: 24%; background: #6f8a6d; border-radius: 50% 50% 0 0; }
.모나_강 { top: 46%; left: 10%; width: 80%; height: 8px; background: #9fc4d8; border-radius: 999px; }
.모나_머리 { top: 26%; left: 50%; transform: translateX(-50%); width: 100px; height: 130px; background: #3b2b1d; border-radius: 50% 50% 24% 24%; }
.모나_얼굴 { top: 32%; left: 50%; transform: translateX(-50%); width: 64px; height: 76px; background: #e5c39a; border-radius: 50%; }
.모나_눈 { top: 44%; width: 12px; height: 7px; background: #4a3320; border-radius: 50%; }
.모나_왼눈 { left: 38%; }
.모나_오른눈 { right: 38%; }
.모나_미소 { top: 52%; left: 50%; transform: translateX(-50%); width: 28px; height: 12px; border-bottom: 3px solid #8a5a3a; border-radius: 0 0 20px 20px; }
.모나_드레스 { bottom: 0; left: 50%; transform: translateX(-50%); width: 170px; height: 78px; background: #2f2a22; border-radius: 60% 60% 0 0; }
.모나_손 { bottom: 14px; left: 50%; transform: translateX(-50%); width: 70px; height: 20px; background: #e5c39a; border-radius: 999px; }

.밤_하늘 { top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#1b3b8f, #0b1f52); }
.밤_소용돌이 { top: 18%; left: 26%; width: 88px; height: 70px; border: 8px solid #4f7fd8; border-radius: 50%; opacity: 0.85; }
.밤_달 { top: 8%; right: 12px; width: 40px; height: 40px; background: #ffd93d; border-radius: 50%; box-shadow: 0 0 18px #ffd93d; }
.밤_별 { width: 16px; height: 16px; background: #ffe98a; border-radius: 50%; box-shadow: 0 0 12px #ffe98a; }
.밤_별1 { top: 30%; left: 14px; }
.밤_별2 { top: 10%; left: 38%; }
.밤_나무 { bottom: 0; left: 8px; width: 44px; height: 160px; background: #16281a; border-radius: 50% 50% 24% 24%; }
.밤_마을 { bottom: 0; left: 0; width: 100%; height: 52px; background: #26355e; }
.밤_첨탑 { bottom: 44px; left: 58%; width: 18px; height: 60px; background: #3a4a7a; border-radius: 50% 50% 0 0; }

.비_배경 { top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#2b2b45, #4a3f6b); }
.비_기둥 { top: 0; width: 24px; height: 100%; background: #7a7290; }
.비_왼기둥 { left: 6px; }
.비_오른기둥 { right: 6px; }
.비_받침 { bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 28px; background: #b9b2a0; border-radius: 6px; }
.비_몸통 { bottom: 28px; left: 50%; transform: translateX(-50%); width: 78px; height: 118px; background: #efe7d8; border-radius: 40% 40% 26% 26%; }
.비_천 { bottom: 28px; left: 50%; transform: translateX(-50%); width: 86px; height: 56px; background: #ddd2bc; border-radius: 18px; }
.비_머리 { bottom: 142px; left: 50%; transform: translateX(-50%); width: 48px; height: 54px; background: #efe7d8; border-radius: 50%; }

.그림안내 { font-size: 15px; color: #555; margin: 8px 0 0; }

/* ===== 🦹 렌디온 두목 ===== */
.렌디온 { position: relative; width: 200px; height: 210px; margin: 10px auto; animation: 흔들 1.2s ease-in-out infinite; filter: drop-shadow(0 0 16px #ff3d6b); }

@keyframes 흔들 {
  0%, 100% { transform: translateX(-12px) rotate(-4deg); }
  50% { transform: translateX(12px) rotate(4deg); }
}

.렌디온 .망토 {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 190px; height: 130px; background: linear-gradient(#3a1352, #1a0728);
  border: 4px solid #7a2fb0;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 78% 84%, 62% 100%, 50% 84%, 38% 100%, 22% 84%, 8% 100%);
}

.렌디온 .후드 {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 110px; background: linear-gradient(#5a1e7e, #240a38);
  border: 4px solid #a24ce0; border-radius: 58px 58px 40% 40%;
}

.렌디온 .렌디온얼굴 {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 62px; background: #120520; border-radius: 42px 42px 36px 36px; z-index: 2;
}

.렌디온 .렌디온눈 {
  position: absolute; top: 18px; width: 22px; height: 12px; background: #ff2d55;
  border-radius: 60% 60% 40% 40%; box-shadow: 0 0 14px #ff2d55; animation: 눈번쩍 0.9s infinite;
}

.렌디온 .렌디온눈.왼 { left: 8px; transform: rotate(-14deg); }
.렌디온 .렌디온눈.오른 { right: 8px; transform: rotate(14deg); }

@keyframes 눈번쩍 { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.렌디온 .렌디온입 {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 14px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 76% 20%, 62% 100%, 50% 20%, 38% 100%, 24% 20%, 10% 100%);
}

.렌디온 .뿔 { position: absolute; top: -4px; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 40px solid #a24ce0; }
.렌디온 .왼뿔 { left: 24px; transform: rotate(-24deg); }
.렌디온 .오른뿔 { right: 24px; transform: rotate(24deg); }

.렌디온 .손 { position: absolute; top: 118px; width: 34px; height: 34px; background: radial-gradient(#ff9ec0, #ff2d55); border: 3px solid #7a2fb0; border-radius: 50%; box-shadow: 0 0 14px #ff2d55; }
.렌디온 .왼손 { left: -4px; }
.렌디온 .오른손 { right: -4px; }

.렌디온 .가슴표시 { position: absolute; top: 132px; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: bold; color: #ff2d55; text-shadow: 0 0 12px #ff2d55; z-index: 3; }

/* ===== ⚔️ 턴 전투판 ===== */
.전투상자 { margin-top: 10px; }
.에이치피줄 { text-align: left; margin: 8px 0; font-size: 17px; }

.에이치피바 { background: #eee; border: 3px solid #12204a; border-radius: 999px; height: 22px; overflow: hidden; margin: 4px 0 2px; }
.에이치피바 span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a8a, #ff2d55); transition: width 0.4s; }
.에이치피바.내바 span { background: linear-gradient(90deg, #7ee0ff, #2f6fd0); }

.전투로그 { background: #12204a; color: #fff; border-radius: 14px; padding: 8px; height: 110px; overflow-y: auto; text-align: left; font-size: 15px; margin: 8px 0; }
.전투로그 p { margin: 3px 0; }
.전투로그 p.좋음 { color: #8dffc0; }
.전투로그 p.나쁨 { color: #ff9ec0; }

.명령줄 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.명령 { font-size: 18px; padding: 10px 16px; background: #2c9e5b; box-shadow: 0 5px 0 #1a6b3c; }

/* ===== 🎵 리듬 게임판 ===== */
.리듬상자 { margin-top: 8px; }
.리듬점수 { font-size: 19px; font-weight: bold; margin-bottom: 6px; }

.리듬판 {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  height: 260px; background: #12204a; border-radius: 16px; padding: 6px; overflow: hidden;
}

.레인 { position: relative; background: rgba(255, 255, 255, 0.08); border-radius: 12px; }

.판정칸 {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; line-height: 46px; font-size: 26px; color: #fff;
  background: rgba(255, 255, 255, 0.16); border: 3px solid #ffd93d; border-radius: 12px;
}

.판정칸.눌림 { background: #ffd93d; color: #12204a; transform: translateX(-50%) scale(1.15); }

.노트 {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; line-height: 46px; font-size: 26px; color: #12204a;
  background: linear-gradient(#ffd93d, #ff9f2d); border: 3px solid #b56b00; border-radius: 12px;
}

.노트.맞음 { background: #7ee0ff; border-color: #2f6fd0; transform: translateX(-50%) scale(1.4); opacity: 0; transition: all 0.15s; }

.키버튼줄 { display: flex; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.키버튼, .이동버튼 { font-size: 24px; padding: 10px 16px; background: #ff5a8a; box-shadow: 0 5px 0 #b52f5a; }
.리듬안내 { font-size: 15px; color: #555; margin: 6px 0 0; }

/* 📸 찰칵 대결 */
.시간막대 { background: #eee; border-radius: 999px; height: 20px; overflow: hidden; margin: 10px 0; }
.시간막대 b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffd93d, #ff3d6b); }

button.찰칵 { background: #ff5a8a; box-shadow: 0 5px 0 #b52f5a; font-size: 26px; }

/* 기록판 */
.기록판 {
  max-width: 760px; margin: 14px auto;
  background: rgba(255, 255, 255, 0.92); color: #12204a;
  border-radius: 18px; padding: 10px; max-height: 210px; overflow-y: auto; font-size: 17px; text-align: left;
}

.기록판 p { margin: 4px 0; }
.기록판 p.좋음 { color: #1f8a4c; font-weight: bold; }
.기록판 p.나쁨 { color: #d63b52; font-weight: bold; }
.기록판 p.큰글 { font-size: 21px; font-weight: bold; text-align: center; }

@media (max-width: 820px) {
  .옐토르, .펜드래곤, .뤼팽, .츠네네, .루루, .아르마딜로, .오셀로틀, .파트라 { transform: scale(0.8); }
  .스테이지카드 { width: 90%; }
  .명화 { width: 140px; height: 175px; }
}