/* 🎬 이야기 애니메이션 + 📋 규칙 설명 + 🏆 승리 연출 + 🤝 친구 목록 + 🖼️ 진짜/가짜 퀴즈 */

.이야기막 {
  position: fixed; inset: 0; z-index: 40;
  background: #05070f;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px;
}

.이야기막.보임 { display: flex; }

/* 🎥 무대 */
.무대 {
  position: relative;
  width: min(94vw, 660px); height: min(48vh, 340px);
  border: 5px solid #7ee0ff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 30px rgba(126, 224, 255, 0.4);
  background: #10203a;
}

.무대.밤거리 { background: linear-gradient(#0b1533 55%, #2b3a55 55%); }
.무대.하늘 { background: linear-gradient(#7ecbff, #d8f2ff); }
.무대.축제 { background: linear-gradient(#ffd36b, #ff8a5c); }
.무대.투우장 { background: linear-gradient(#9fd8ff 60%, #e0b56a 60%); }
.무대.무대조명 { background: radial-gradient(circle at 50% 30%, #ffe9a8, #c0392b); }
.무대.폰빛 { background: radial-gradient(circle at 50% 55%, #ffffff, #3fb5ea 45%, #12204a); }
.무대.노을 { background: linear-gradient(#ffb36b, #ff6b8a 60%, #6b3f8a); }

.바닥선 { position: absolute; bottom: 0; left: 0; width: 100%; height: 24%; background: rgba(0, 0, 0, 0.18); }

.관중 {
  position: absolute; top: 6px; left: 0; width: 100%;
  font-size: 24px; letter-spacing: 4px; text-align: center;
  animation: 관중응원 0.9s ease-in-out infinite;
}

@keyframes 관중응원 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.배우 { position: absolute; font-size: 48px; line-height: 1; }
.배우.큼 { font-size: 70px; }
.배우.작음 { font-size: 30px; }

/* 🎭 CSS 캐릭터 자리 */
.케릭자리 { position: absolute; bottom: 12%; }
.케릭크기 { transform: scale(0.6); transform-origin: bottom center; }
.케릭크기.작게 { transform: scale(0.42); }
.케릭크기.크게 { transform: scale(0.78); }

.케릭크기 > .아이,
.케릭크기 > .트레미,
.케릭크기 > .옐토르 { margin: 0 !important; }

/* 🎬 움직임들 */
.걸어오기 { animation: 걸어오기 4s ease-out forwards; }
@keyframes 걸어오기 { 0% { transform: translateX(0); } 100% { transform: translateX(180px); } }

.떨어지기 { animation: 떨어지기 1.4s ease-in forwards; }
@keyframes 떨어지기 {
  0% { transform: translateY(-220px) rotate(-30deg); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}

.날기 { animation: 날기 5s linear infinite; }
@keyframes 날기 {
  0% { transform: translateX(-120px) translateY(0); }
  50% { transform: translateX(280px) translateY(-24px); }
  100% { transform: translateX(680px) translateY(0); }
}

.구름흐르기 { animation: 구름흐르기 9s linear infinite; opacity: 0.9; }
@keyframes 구름흐르기 { 0% { transform: translateX(700px); } 100% { transform: translateX(-200px); } }

.통통 { animation: 통통 0.7s ease-in-out infinite; }
@keyframes 통통 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

.일어서기 { animation: 일어서기 2.8s ease-out forwards; transform-origin: bottom center; }
@keyframes 일어서기 {
  0% { transform: rotate(-86deg); }
  60% { transform: rotate(10deg); }
  100% { transform: rotate(0); }
}

.춤추기 { animation: 춤추기 0.55s ease-in-out infinite; transform-origin: bottom center; }
@keyframes 춤추기 {
  0% { transform: rotate(-10deg) translateY(0); }
  50% { transform: rotate(10deg) translateY(-12px); }
  100% { transform: rotate(-10deg) translateY(0); }
}

.홀린춤 { animation: 홀린춤 0.45s ease-in-out infinite; }
@keyframes 홀린춤 { 0%, 100% { transform: rotate(-20deg) translateY(0); } 50% { transform: rotate(20deg) translateY(-10px); } }

.얼음 { animation: 얼음 2s ease-in-out infinite; }
@keyframes 얼음 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.빛터짐 { animation: 빛터짐 1.6s ease-out infinite; }
@keyframes 빛터짐 {
  0% { transform: scale(0.4); opacity: 0.2; }
  60% { opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

.튀어나오기 { animation: 튀어나오기 1.3s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes 튀어나오기 {
  0% { transform: scale(0.05) translateY(60px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.손흔들기 { animation: 손흔들기 0.9s ease-in-out infinite; transform-origin: bottom center; }
@keyframes 손흔들기 { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

.돌진준비 { animation: 돌진준비 0.7s ease-in-out infinite; }
@keyframes 돌진준비 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-26px) scale(1.05); } }

.반짝임 { animation: 반짝임 1.1s ease-in-out infinite; }
@keyframes 반짝임 { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.25); } }

.화면흔들 { animation: 화면흔들 0.25s linear infinite; }
@keyframes 화면흔들 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 2px); }
  75% { transform: translate(4px, -2px); }
}

/* 🏆 승리 장면용 */
.쓰러지기 { animation: 쓰러지기 1.8s ease-in forwards; transform-origin: bottom center; }
@keyframes 쓰러지기 {
  0% { transform: rotate(0); }
  30% { transform: rotate(-12deg); }
  100% { transform: rotate(78deg) translateY(10px); }
}

.사라지기 { animation: 사라지기 2.6s ease-in forwards; }
@keyframes 사라지기 {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-260px, -30px) scale(0.15); filter: blur(4px); }
}

.기뻐뛰기 { animation: 기뻐뛰기 0.6s ease-in-out infinite; }
@keyframes 기뻐뛰기 {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-24px) rotate(4deg); }
}

/* 💬 자막 */
.자막상자 {
  background: rgba(0, 0, 0, 0.72);
  border: 5px solid #7ee0ff; border-radius: 18px;
  padding: 13px 18px; margin-top: 12px;
  max-width: 660px; width: 94%; min-height: 74px;
  display: flex; align-items: center; justify-content: center;
}

.자막글 {
  color: #ffffff; font-size: 22px; font-weight: bold; line-height: 1.5;
  text-align: center; margin: 0; text-shadow: 2px 2px 0 #12204a;
}

.자막줄바 {
  width: 94%; max-width: 660px; height: 10px; margin-top: 8px;
  background: rgba(255, 255, 255, 0.15); border-radius: 999px; overflow: hidden;
}

.자막줄바 b {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #7ee0ff, #ffd93d);
  transition: width 0.3s;
}

.이야기버튼줄 { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.이야기버튼 { font-size: 19px; padding: 11px 18px; background: #2f6fd0; box-shadow: 0 5px 0 #1a4f8a; }
.건너뛰기 { background: #6b5f8a; box-shadow: 0 5px 0 #3d3554; font-size: 16px; }

/* 🏆 승리 배너 */
.승리막 {
  position: fixed; inset: 0; z-index: 42;
  background: radial-gradient(circle at 50% 45%, rgba(255, 217, 61, 0.35), rgba(5, 7, 15, 0.94));
  display: none; align-items: center; justify-content: center; flex-direction: column;
}

.승리막.보임 { display: flex; }

.승리글 {
  font-size: 86px; font-weight: bold; color: #ffd93d;
  text-shadow: 5px 5px 0 #a3520c, 0 0 40px #ffb300;
  animation: 승리쿵 0.9s cubic-bezier(.2, 1.7, .4, 1);
}

@keyframes 승리쿵 {
  0% { transform: scale(0.2) rotate(-18deg); opacity: 0; }
  70% { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.승리별들 { font-size: 44px; letter-spacing: 12px; margin-top: 10px; animation: 별반짝 0.7s ease-in-out infinite alternate; }

@keyframes 별반짝 { 0% { opacity: 0.4; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }

/* ==========================================================
   🤝 캡처해서 친구가 된 요원들
   ========================================================== */

.친구상자 {
  background: rgba(255, 255, 255, 0.92); color: #12204a;
  border: 6px solid #ffd93d; border-radius: 22px;
  padding: 12px; margin: 12px auto; max-width: 420px;
}

.친구제목 { font-size: 20px; font-weight: bold; margin: 0 0 8px; }

.친구줄 { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.친구카드 {
  background: linear-gradient(#fff6dd, #ffe9a8);
  border: 4px solid #ffb300; border-radius: 16px;
  padding: 8px 10px; min-width: 78px;
  animation: 친구인사 2.4s ease-in-out infinite;
}

@keyframes 친구인사 { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }

.친구그림 { font-size: 34px; }
.친구이름 { font-size: 14px; font-weight: bold; }
.친구없음 { font-size: 16px; color: #5a6b8c; margin: 0; }

/* ==========================================================
   🖼️ 뤼팽 — 진짜? 가짜? 퀴즈
   ========================================================== */

.퀴즈틀 {
  position: relative;
  width: min(78vw, 260px); height: min(78vw, 260px);
  margin: 8px auto; border: 6px solid #a3520c; border-radius: 10px;
  background: #f3e6c8; overflow: hidden;
  transition: filter 0.2s;
}

.장난꾸러기 {
  position: absolute; font-size: 44px; z-index: 5;
  transform: translate(-50%, -50%);
}

.퀴즈시간 {
  width: min(80vw, 300px); height: 16px; margin: 8px auto;
  background: rgba(255, 255, 255, 0.25); border: 3px solid #ffffff;
  border-radius: 999px; overflow: hidden;
}

.퀴즈시간 b {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #2c9e5b, #ffd93d, #e94b3c);
}

.퀴즈말 { font-size: 19px; font-weight: bold; color: #ffffff; margin: 8px 0; min-height: 26px; }

.퀴즈버튼 { font-size: 22px; padding: 12px 24px; }
.퀴즈버튼.진짜 { background: #2c9e5b; box-shadow: 0 6px 0 #1a6b3c; }
.퀴즈버튼.가짜 { background: #e94b3c; box-shadow: 0 6px 0 #a32c20; }
.퀴즈버튼:disabled { opacity: 0.5; }

/* ==========================================================
   📋 규칙 설명 창
   ========================================================== */

.규칙막 {
  position: fixed; inset: 0; z-index: 41;
  background: rgba(5, 12, 30, 0.94);
  display: none; align-items: center; justify-content: center; padding: 14px;
}

.규칙막.보임 { display: flex; }

.규칙창 {
  background: linear-gradient(#12204a, #1c3568);
  border: 6px solid #7ee0ff; border-radius: 24px;
  padding: 18px; width: min(94vw, 560px);
  max-height: 92vh; overflow-y: auto; text-align: center;
  box-shadow: 0 0 34px rgba(126, 224, 255, 0.45);
}

.규칙제목 { font-size: 24px; color: #ffd93d; margin: 0 0 8px; }

.규칙트레미칸 { height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.규칙트레미칸 .케릭크기 { transform: scale(0.62); }

.규칙말풍선 {
  background: #ffffff; color: #12204a;
  border: 4px solid #7ee0ff; border-radius: 18px;
  padding: 12px; margin: 10px auto; font-size: 18px; font-weight: bold;
}

.규칙목록 { list-style: none; padding: 0; margin: 10px 0; text-align: left; }

.규칙목록 li {
  background: rgba(255, 255, 255, 0.12);
  border-left: 6px solid #ffd93d; border-radius: 10px;
  padding: 9px 12px; margin-bottom: 7px;
  font-size: 17px; color: #ffffff; line-height: 1.4;
}

.조작줄 {
  background: rgba(126, 224, 255, 0.16);
  border: 3px dashed #7ee0ff; border-radius: 14px;
  padding: 10px; margin-top: 8px; font-size: 17px; color: #eaf7ff; font-weight: bold;
}

.시작버튼 { font-size: 22px; padding: 13px 26px; margin-top: 12px; background: #2c9e5b; box-shadow: 0 6px 0 #1a6b3c; }

@media (max-width: 620px) {
  .배우 { font-size: 36px; }
  .배우.큼 { font-size: 54px; }
  .자막글 { font-size: 18px; }
  .승리글 { font-size: 56px; }
  .케릭크기 { transform: scale(0.46); }
  .케릭크기.작게 { transform: scale(0.34); }
  .케릭크기.크게 { transform: scale(0.58); }
  .규칙목록 li { font-size: 15px; }
}