/* 디코의 모험 1화 - 도망치기 */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px 10px 36px;
  font-family: "Segoe UI", sans-serif;
  color: #f2f6ff;
  background: radial-gradient(circle at 50% 0%, #2a1030, #0d0616 60%, #050209);
  text-align: center;
  min-height: 100vh;
}

h1 {
  font-size: 38px; margin: 6px 0 0;
  letter-spacing: 3px; color: #b884ff;
  text-shadow: 0 0 20px #8b3fd6, 0 4px 0 #2a0a45;
}
.부제 { font-size: 17px; color: #9fd4ff; margin: 2px 0 10px; letter-spacing: 2px; }

.돌아가기 {
  display: inline-block; background: #1f1030; color: #c9a0ff;
  border: 3px solid #8b3fd6; border-radius: 999px;
  padding: 7px 16px; font-size: 16px; font-weight: bold; text-decoration: none;
}

.화면칸 { position: relative; display: inline-block; max-width: 100%; }
#화면 {
  display: block; max-width: 100%;
  border: 6px solid #8b3fd6; border-radius: 14px;
  background: #06030c; cursor: crosshair;
}

/* 퀘스트판 */
.퀘스트판 {
  position: absolute; left: 14px; top: 14px;
  background: rgba(10,4,20,.75);
  border-left: 5px solid #ffd34d;
  padding: 7px 14px; text-align: left; pointer-events: none;
}
.퀘스트제목 { font-size: 12px; color: #ffd34d; letter-spacing: 3px; }
.퀘스트글 { font-size: 22px; font-weight: bold; color: #fff; text-shadow: 0 2px 6px #000; }
.퀘스트밑 { font-size: 14px; color: #9fd4ff; }
.퀘스트판.완료 .퀘스트글 { color: #5aff8a; text-decoration: line-through; }

/* 체력 */
.목숨판 {
  position: absolute; right: 14px; top: 14px;
  display: flex; align-items: center; gap: 7px; pointer-events: none;
}
.목숨이름 { font-size: 14px; font-weight: bold; color: #ff8a9a; }
.긴바 {
  width: 150px; height: 15px;
  background: #00000099; border: 2px solid #ffffff55; border-radius: 999px; overflow: hidden;
}
.긴바 span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff2f4a, #ff8a6b);
  transition: width .2s;
}

/* 컷신 — 화면 전체를 덮어요 */
.컷신 {
  position: absolute; inset: 0;
  background: rgba(3,1,7,.93);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 9;
}
.컷신.숨김 { display: none; }
.컷신안 {
  width: 88%; text-align: center;
  border-top: 4px solid #ffd34d; border-bottom: 4px solid #ffd34d;
  padding: 26px 18px 34px; position: relative;
}
.말한이 {
  display: inline-block; font-size: 18px; font-weight: bold;
  background: #ffd34d; color: #2a1030;
  padding: 4px 18px; border-radius: 999px; margin-bottom: 14px;
  letter-spacing: 2px;
}
.대사글 {
  font-size: 30px; line-height: 1.6; min-height: 100px;
  text-shadow: 0 3px 10px #000;
}
.다음표시 {
  position: absolute; left: 0; right: 0; bottom: 6px;
  font-size: 15px; color: #9fd4ff; animation: 깜박 1s infinite;
}
@keyframes 깜박 { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

/* 안내 */
.안내 {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  font-size: 30px; font-weight: bold; color: #ffd34d;
  text-shadow: 0 0 20px #ff6b00, 0 4px 8px #000;
  white-space: nowrap;
}
.안내.숨김 { display: none; }

.조작안내 { margin: 8px auto; max-width: 720px; font-size: 15px; color: #c9a0ff; }
.조작안내 b { color: #ffd34d; }

.터치판 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0; }
.터치 {
  font-size: 15px; font-weight: bold;
  min-width: 78px; height: 44px;
  border: 3px solid #fff; border-radius: 10px;
  background: linear-gradient(#8b3fd6, #4a1b7a);
  color: #fff; cursor: pointer; box-shadow: 0 4px 0 #2a0a45;
}
.터치:active { transform: translateY(3px); box-shadow: 0 1px 0 #2a0a45; }

.아래줄 { display: flex; justify-content: center; gap: 10px; }
.작은버튼 {
  font-size: 16px; font-weight: bold; padding: 8px 16px;
  border: 3px solid #fff; border-radius: 12px;
  background: linear-gradient(#ff5a6e, #a3101f); color: #fff; cursor: pointer;
}