/* ===== 퀘스트 박스 ===== */

/* 박스 (quest_box.png 비율 1391 x 449 그대로) */
#quest-box {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: min(520px, 62vw);   /* 박스 크기는 여기서 조절 */
  aspect-ratio: 1391 / 449;
  background: url("../images/icons/quest_box.png") center / 100% 100% no-repeat;
  pointer-events: none;      /* 박스가 360 화면 드래그를 막지 않게 */
  transition: opacity 0.6s;
}

#quest-box.hidden {
  opacity: 0;
}

/* 박스 안쪽 점선 영역에 맞춘 글자 줄 */
#quest-line {
  position: absolute;
  left: 9%;
  right: 6%;
  top: 30%;
  bottom: 26%;
  display: flex;
  align-items: center;
  gap: 1.5%;             /* 글자와 체크 사이 간격 */
}

#quest-text {
  color: #111;
  font-size: clamp(13px, 1.5vw, 22px);
  font-weight: 600;
  white-space: nowrap;
}

/* 체크 아이콘: 평소엔 숨김 */
#quest-check {
  height: 90%;
  width: auto;
  visibility: hidden;
  position: relative;
  top: 6%;               /* 살짝 아래로 (숫자 키우면 더 아래) */
}

/* ----- 애니메이션 ----- */

/* 체크 등장: 왼쪽 → 오른쪽으로 스윽 */
#quest-check.show {
  visibility: visible;
  animation: wipe-in 0.5s ease-out forwards;
}

/* 글자 줄 등장: 왼쪽 → 오른쪽으로 써지듯 */
#quest-line.anim-in {
  animation: wipe-in 0.5s ease-out forwards;
}

/* 글자 줄 퇴장: 왼쪽부터 지워지며 사라짐 */
#quest-line.anim-out {
  animation: wipe-out 0.4s ease-in forwards;
}

/* -50% 여백: 아이템 그림이 줄보다 커도 잘리지 않게 */
@keyframes wipe-in {
  from { clip-path: inset(-50% 100% -50% 0); }
  to   { clip-path: inset(-50% -20% -50% 0); }
}

@keyframes wipe-out {
  from { clip-path: inset(-50% -20% -50% 0); }
  to   { clip-path: inset(-50% -20% -50% 100%); }
}

/* 보상일 때: 체크 대신 아이템 그림 (조금 크게) */
#quest-check.reward {
  height: 80%;
  top: 0;
}

/* ===== 아이템 상자 (퀘스트 박스 바로 아래) ===== */
#item-box {
  position: fixed;
  right: 22px;
  top: calc(16px + min(520px, 62vw) * 449 / 1391 - 4px);  /* 퀘스트 박스 높이만큼 아래 */
  z-index: 10;
  width: calc(min(520px, 62vw) * 0.3);                     /* 퀘스트 박스의 30% 크기 */
  aspect-ratio: 560 / 346;
  background: url("../images/icons/item_box.png") center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px) scale(0.9);
  transition: opacity 0.5s, transform 0.5s;
}

#item-box.visible {
  opacity: 1;
  transform: none;
}

/* 아이템이 들어가는 칸 (상자의 흰 부분) */
#item-slot {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46%;
  bottom: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
}

.item-img {
  height: 100%;
  width: auto;
  animation: item-pop 0.5s ease-out;
}

/* 들어올 때: 톡 튀어나오기 */
@keyframes item-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* 사용할 때: 빛나면서 사라지기 */
.item-img.used {
  animation: item-use 0.6s ease-in forwards;
}

@keyframes item-use {
  0%   { transform: scale(1);   filter: brightness(1); opacity: 1; }
  40%  { transform: scale(1.2); filter: brightness(2) drop-shadow(0 0 8px #fff); opacity: 1; }
  100% { transform: scale(0.2); filter: brightness(3); opacity: 0; }
}

/* ===== 마지막 클리어 문구 (박스 가운데) ===== */
#quest-final {
  position: absolute;
  left: 7%;
  right: 6%;
  top: 27%;
  bottom: 23%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #111;
  font-size: clamp(12px, 1.3vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  white-space: pre-line;         /* 문장 안의 \n 에서 줄바꿈 */
  word-break: keep-all;          /* 한글 단어 중간에서 줄바꿈 안 되게 */
  opacity: 0;
  visibility: hidden;
}

#quest-final.show {
  visibility: visible;
  animation: final-in 0.7s cubic-bezier(.2, 1.4, .4, 1) forwards, final-glow 1.2s ease-in-out 0.7s infinite;
}

#quest-final.out {
  animation: final-out 0.5s ease-in forwards;
}

@keyframes final-in {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes final-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; transform: scale(1); }
  50%      { text-shadow: 0 0 10px rgba(255, 200, 40, 0.9); transform: scale(1.04); }
}

@keyframes final-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.85); }
}

/* 폭죽 종이 조각 (effects.js 가 만듦) */
.fx-confetti {
  position: absolute;
  width: 7px;
  height: 11px;
  pointer-events: none;
  z-index: 2;
}

/* ===== 최종 보상 그림 (cleared.jpg) — 등장 후 계속 유지 ===== */
#quest-prize {
  position: absolute;
  left: 20.5%;
  right: 18.5%;
  top: 31%;
  bottom: 19.5%;
  background: center / cover no-repeat;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

#quest-prize.show {
  visibility: visible;
  animation: prize-in 1s ease-out forwards;
}

/* 은은하게 빛이 스쳐 지나가는 효과 (계속 반복) */
#quest-prize::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0;
}

#quest-prize.show::after {
  animation: prize-shine 4s ease-in-out 1s infinite;
}

@keyframes prize-in {
  0%   { opacity: 0; clip-path: inset(0 50% 0 50%); filter: brightness(3) blur(4px); }
  60%  { opacity: 1; clip-path: inset(0 0 0 0);     filter: brightness(1.6) blur(0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0);     filter: brightness(1); }
}

@keyframes prize-shine {
  0%, 60%  { background-position: 150% 0; }
  90%, 100% { background-position: -60% 0; }
}