/* ============================================================
   modal.css — 실패 팝업 (2026-09-26 개편)
   무섭던 MISSION FAILED 대신, 밝은 수영장에서
   돌고래 · 낙하산 · 우주선이 나타나 한마디 하고 간다.
   ============================================================ */

#failModal {
  position: fixed; inset: 0; z-index: 260;
  display: none;
  overflow: hidden;
  background: linear-gradient(180deg,
      #7fd4ff 0%, #a9e6ff 26%, #d8f4ff 48%,
      #45c0ea 48%, #27a0d8 68%, #1479b8 100%);
}
#failModal.show { display: block; }

/* ── 하늘 ── */
.fm-sun {
  position: absolute; right: 12%; top: 6%;
  width: 16vmin; height: 16vmin; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff9c4 0%, #ffe066 55%, #ffc93c 100%);
  box-shadow: 0 0 40px rgba(255,214,80,.85), 0 0 90px rgba(255,214,80,.5);
  animation: fmSun 5s ease-in-out infinite;
}
@keyframes fmSun { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.fm-cloud {
  position: absolute; height: 7vmin; border-radius: 99px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(0,80,140,.12);
}
.fm-cloud::before, .fm-cloud::after {
  content: ''; position: absolute; bottom: 24%; border-radius: 50%;
  background: rgba(255,255,255,.92);
}
.fm-cloud::before { left: 16%; width: 46%; height: 150%; }
.fm-cloud::after  { right: 14%; width: 34%; height: 118%; }
.fm-cloud.c1 { width: 24vmin; left: -28vmin; top: 9%;  animation: fmDrift 26s linear infinite; }
.fm-cloud.c2 { width: 17vmin; left: -22vmin; top: 22%; animation: fmDrift 34s linear infinite 6s; opacity: .8; }
@keyframes fmDrift { to { transform: translateX(160vw); } }

/* ── 수영장 ── */
.fm-pool { position: absolute; left: 0; right: 0; top: 48%; bottom: 0; overflow: hidden; }
.fm-wave {
  position: absolute; left: -50%; width: 200%; height: 5vmin;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.fm-wave.w1 { top: -2.2vmin; animation: fmWave 7s ease-in-out infinite; }
.fm-wave.w2 { top: 1.4vmin; background: rgba(255,255,255,.18); animation: fmWave 9s ease-in-out infinite reverse; }
@keyframes fmWave {
  0%,100% { transform: translateX(-4%) scaleY(1); }
  50%     { transform: translateX(4%) scaleY(1.25); }
}
/* 물결 반짝임 */
.fm-pool::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.35) 0 .8vmin, transparent 1vmin),
    radial-gradient(circle at 62% 46%, rgba(255,255,255,.3)  0 .6vmin, transparent .8vmin),
    radial-gradient(circle at 84% 24%, rgba(255,255,255,.28) 0 .7vmin, transparent .9vmin),
    radial-gradient(circle at 36% 68%, rgba(255,255,255,.22) 0 .9vmin, transparent 1.1vmin);
  animation: fmSpark 3.4s ease-in-out infinite;
}
@keyframes fmSpark { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ── 등장 인물 ── */
.fm-actor {
  position: absolute; left: 50%; top: 26%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
}
.fm-ch {
  font-size: clamp(74px, 22vmin, 170px);
  line-height: 1;
  filter: drop-shadow(0 10px 18px rgba(0,60,100,.35));
}

/* 말풍선 */
.fm-say {
  position: relative;
  display: inline-block;
  max-width: min(86vw, 520px);
  margin-bottom: 2.2vmin;
  padding: 2.4vmin 3.4vmin;
  border-radius: 2.4vmin;
  background: #fff;
  color: #14364a;
  font-family: 'HakgyoansimNamu', 'Jua', 'Malgun Gothic', sans-serif;
  font-size: clamp(19px, 4.6vmin, 34px);
  line-height: 1.45;
  word-break: keep-all;
  box-shadow: 0 6px 20px rgba(0,70,120,.28);
  opacity: 0;
  animation: fmSay .4s cubic-bezier(.2,1.5,.4,1) .75s forwards;
}
.fm-say::after {
  content: ''; position: absolute; left: 50%; bottom: -1.6vmin; margin-left: -1.4vmin;
  border: 1.5vmin solid transparent; border-top-color: #fff; border-bottom: 0;
}
@keyframes fmSay {
  from { opacity: 0; transform: scale(.6) translateY(1.6vmin); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 🐬 돌고래 : 물속에서 솟아오른다 */
#failModal.sc-dolphin .fm-actor { animation: fmDolphin 1.05s cubic-bezier(.2,1.1,.4,1) forwards; }
@keyframes fmDolphin {
  0%   { transform: translateX(-50%) translateY(72vh) rotate(-24deg); }
  58%  { transform: translateX(-50%) translateY(-5vh) rotate(8deg); }
  80%  { transform: translateX(-50%) translateY(2vh) rotate(-3deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(0); }
}
#failModal.sc-dolphin .fm-ch { animation: fmBob 2.4s ease-in-out 1.1s infinite; }

/* 🪂 낙하산 : 하늘에서 살랑살랑 내려온다 */
#failModal.sc-para .fm-actor { animation: fmPara 1.5s ease-out forwards; }
@keyframes fmPara {
  0%   { transform: translateX(-50%) translateY(-80vh) rotate(-10deg); }
  45%  { transform: translateX(-46%) translateY(-24vh) rotate(9deg); }
  75%  { transform: translateX(-54%) translateY(-6vh) rotate(-7deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(0); }
}
#failModal.sc-para .fm-ch { animation: fmSway 3s ease-in-out 1.55s infinite; }

/* 🚀 우주선 : 왼쪽 아래에서 날아 들어온다 */
#failModal.sc-rocket .fm-actor { animation: fmRocket 1.15s cubic-bezier(.2,.9,.35,1) forwards; }
@keyframes fmRocket {
  0%   { transform: translateX(-50%) translate(-88vw, 46vh) rotate(-24deg); }
  70%  { transform: translateX(-50%) translate(4vw, -3vh) rotate(6deg); }
  100% { transform: translateX(-50%) translate(0, 0) rotate(0); }
}
#failModal.sc-rocket .fm-ch { animation: fmBob 2.2s ease-in-out 1.2s infinite; }

@keyframes fmBob  { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1.4vmin) rotate(2deg); } }
@keyframes fmSway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* 물보라 (돌고래일 때만) */
.fm-splash { position: absolute; left: 50%; top: 46%; z-index: 2; display: none; }
#failModal.sc-dolphin .fm-splash { display: block; }
.fm-splash i {
  position: absolute; font-size: clamp(22px, 6vmin, 46px);
  opacity: 0; animation: fmDrop 1.1s ease-out .5s forwards;
}
.fm-splash i:nth-child(1) { left: -14vmin; animation-delay: .5s; }
.fm-splash i:nth-child(2) { left:  -4vmin; animation-delay: .58s; }
.fm-splash i:nth-child(3) { left:   6vmin; animation-delay: .54s; }
.fm-splash i:nth-child(4) { left:  15vmin; animation-delay: .62s; }
@keyframes fmDrop {
  0%   { opacity: 0; transform: translateY(2vmin) scale(.4); }
  35%  { opacity: 1; transform: translateY(-5vmin) scale(1); }
  100% { opacity: 0; transform: translateY(6vmin) scale(.7); }
}

/* ── 아래 카드 ── */
.fm-card {
  position: absolute; left: 50%; bottom: 5%;
  transform: translateX(-50%);
  width: min(90vw, 460px);
  padding: 3vmin 4vmin 3.4vmin;
  border-radius: 3vmin;
  text-align: center;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(0,60,110,.3);
  z-index: 4;
  animation: fmCard .4s ease-out .95s both;
}
@keyframes fmCard { from { opacity: 0; transform: translateX(-50%) translateY(3vmin); }
                    to   { opacity: 1; transform: translateX(-50%) translateY(0); } }
.fm-rec {
  font-size: clamp(14px, 3.2vmin, 21px);
  font-weight: 800;
  color: #2b6584;
  margin-bottom: 2.4vmin;
  word-break: keep-all;
}
.fm-rec b { color: #e8590c; }

#tryAgainBtn {
  width: 100%;
  height: clamp(52px, 9vmin, 68px);
  border: none;
  border-radius: 2vmin;
  font-family: 'HakgyoansimNamu', 'Jua', 'Malgun Gothic', sans-serif;
  font-size: clamp(20px, 4.4vmin, 30px);
  letter-spacing: 1px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #ffa94d, #f76707);
  box-shadow: 0 6px 0 #c65102, 0 8px 22px rgba(247,103,7,.45);
  transition: transform .1s, box-shadow .1s, filter .2s;
}
#tryAgainBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c65102, 0 4px 12px rgba(247,103,7,.4); }
#tryAgainBtn:hover  { filter: brightness(1.06); }

/* 물보라 플래시 — 예전의 붉은 섬광 대신 시원한 파란 물결 */
#redFlash {
  position: fixed; inset: 0; z-index: 255;
  background: radial-gradient(circle at 50% 70%, rgba(120,225,255,.9), rgba(60,180,230,0) 62%);
  opacity: 0;
  pointer-events: none;
}
#redFlash.fire { animation: splashHit .5s ease-out; }
@keyframes splashHit {
  0%   { opacity: .55; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .fm-actor, .fm-ch, .fm-say, .fm-card, .fm-cloud, .fm-sun,
  .fm-wave, .fm-splash i, .fm-pool::after { animation: none !important; opacity: 1 !important; }
  .fm-actor { transform: translateX(-50%) !important; }
}