/* ===== 공통 ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --wood: #8a5a35;
  --wood-dark: #5f3c20;
  --cream: #f7e9cf;
  --accent: #e8622a;
  --ink: #3a2a1c;
}

body {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

/* ===== 시작 화면 ===== */
.start-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a1b10;
  overflow: hidden;
}

/* 데스크탑 규격(가로 1440 x 세로 1024) 캔버스.
   화면이 더 작으면 비율을 유지한 채 축소된다. */
.start-stage {
  position: relative;
  width: min(1440px, 100vw, calc(100vh * 1440 / 1024));
  aspect-ratio: 1440 / 1024;
  line-height: 0;
  container-type: size; /* 자식 요소가 cqh/cqw 단위로 스테이지 크기에 맞춰 확대/축소 */
}

.start-bg {
  width: 100%;
  height: 100%;
  object-fit: fill; /* 배경 이미지를 1440x1024 규격에 꽉 채움 */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* 이미지 속 START 버튼 위치에 맞춘 투명 클릭 영역 (버튼 테두리 기준) */
.start-hotspot {
  position: absolute;
  left: 32.23%;
  top: 73.35%;
  width: 35.35%;
  height: 15.25%;
  border-radius: 26px;
  cursor: pointer;
  display: block;
  transition: transform 0.12s ease;
  /* <button> 으로 쓰일 때도 투명한 클릭 영역이 되도록 기본 스타일 제거 */
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* 설명 화면의 "게임시작" 버튼 위치 (버튼 테두리 기준) */
.start-hotspot--intro {
  left: 35.35%;
  top: 67.85%;
  width: 32.71%;
  height: 15.87%;
}

/* 카메라 화면의 "카메라 시작하기" 버튼 위치 (버튼 테두리 기준) */
.start-hotspot--camera {
  left: 32.03%;
  top: 75.41%;
  width: 34.96%;
  height: 13.46%;
}

/* 미션 성공 화면: 처음으로 / 다시하기 버튼 */
.start-hotspot--success-home {
  left: 41.02%;
  top: 59.31%;
  width: 21%;
  height: 9.66%;
  border-radius: 22px;
}

.start-hotspot--success-retry {
  left: 41.02%;
  top: 71.03%;
  width: 21%;
  height: 10.34%;
  border-radius: 22px;
}

/* 미션 성공 화면: 버튼 빛나는 효과 없음 */
.start-hotspot--success-home .start-hotspot__pulse,
.start-hotspot--success-retry .start-hotspot__pulse {
  display: none;
}

/* 말풍선 안 텍스트 (타자기 효과로 한 글자씩 나타남) */
.bubble-text {
  position: absolute;
  left: 37%;
  top: 25.8%;
  width: 47%;
  text-align: center;
  color: #3d2c1a;
  font-weight: 700;
  font-size: 3.75cqh;
  line-height: 1.42;
  pointer-events: none;
}

/* 미션 성공 화면 말풍선 텍스트 - 말풍선 정중앙 정렬 */
.bubble-text--success {
  left: 32.03%;
  top: 18.07%;
  width: 52.44%;
  height: 36.83%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4.1cqh;
  line-height: 1.5;
  color: #3d2c1a;
  box-sizing: border-box;
  padding: 1.2cqh 2% 0;
}

.bubble-text--success .bubble-line {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 미션 실패 화면: 처음으로 / 다시하기 버튼 */
.start-hotspot--fail-home {
  left: 41.89%;
  top: 60.92%;
  width: 20.12%;
  height: 7.82%;
  border-radius: 22px;
}

.start-hotspot--fail-retry {
  left: 41.89%;
  top: 72.24%;
  width: 20.12%;
  height: 8.36%;
  border-radius: 22px;
}

/* 미션 실패 화면 말풍선 텍스트 - 말풍선 정중앙 정렬 */
.bubble-text--fail {
  left: 32.32%;
  top: 18.06%;
  width: 53.13%;
  height: 36.66%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 3.65cqh;
  line-height: 1.42;
  color: #3d2c1a;
  box-sizing: border-box;
  padding: 0.8cqh 2% 0;
}

.bubble-text--fail .bubble-line {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.bubble-line {
  min-height: 1em;
  white-space: nowrap;
}

/* 글자는 처음엔 보이지 않다가 순서대로 나타남 (레이아웃은 미리 확보되어 흔들림 없음) */
.bubble-char {
  opacity: 0;
}

.bubble-char.show {
  opacity: 1;
}

/* 타이핑 커서 */
.bubble-caret {
  display: inline-block;
  width: 0.09em;
  height: 1.05em;
  background: #3d2c1a;
  vertical-align: -0.16em;
  margin-left: 1px;
  animation: caret-blink 0.85s steps(1, end) infinite;
}

.bubble-caret.done {
  animation: none;
  opacity: 0;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* 애니메이션을 끈 사용자에겐 즉시 전부 표시 */
@media (prefers-reduced-motion: reduce) {
  .bubble-char { opacity: 1; }
  .bubble-caret { display: none; }
}

.start-hotspot:hover {
  transform: scale(1.03);
}

.start-hotspot:active {
  transform: scale(0.97);
}

/* START 버튼을 감싸는 은은한 강조 링 (깜빡임) */
.start-hotspot__pulse {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  box-shadow: 0 0 0 3px rgba(255, 214, 138, 0.0);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 214, 138, 0.0); }
  50% { box-shadow: 0 0 0 8px rgba(255, 214, 138, 0.9); }
}

/* ===== 게임 화면 (4번) ===== */
.game-body {
  min-height: 100vh;
  background: #241608;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 데스크탑 규격(비율 1440 x 1024). 게임 화면은 조금 더 크게 */
.game-stage {
  position: relative;
  width: min(1600px, 100vw, calc(100vh * 1440 / 1024));
  aspect-ratio: 1440 / 1024;
  line-height: 0;
  container-type: size;
  overflow: hidden;
  user-select: none;
}

.game-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  -webkit-user-drag: none;
}

/* 중앙 웹캠 영역 (배경의 회색 화면 위치에 맞춤) */
.cam-wrap {
  position: absolute;
  left: 20.70%;
  top: 25.41%;
  width: 58.40%;
  height: 53.98%;
  border-radius: 2.2cqh;
  overflow: hidden;
  background: #11151b;
}

.cam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1) scale(1.45); /* 셀피처럼 좌우 반전 + 얼굴 확대 */
  transform-origin: center 42%;
  display: block;
}

.cam-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbb28e;
  font-size: 2.4cqh;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  padding: 4cqh;
}

.cam-wrap.ready .cam-fallback { display: none; }

/* 입 위치(먹기 존) - 시각 가이드라인은 숨김 (감지 로직에만 사용) */
.eat-zone {
  display: none;
}

/* 벌린 입 위치를 따라다니는 획득 범위 마커 */
.mouth-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  border: 0.45cqh solid rgba(255, 205, 100, 0.9);
  box-shadow: 0 0 2.5cqh rgba(255, 180, 60, 0.55),
    inset 0 0 2cqh rgba(255, 180, 60, 0.4);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.mouth-marker.show { opacity: 1; }

/* 조작 안내 */
.game-hint {
  position: absolute;
  left: 50%;
  top: 21.6%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 2cqh;
  font-weight: 700;
  color: #ffe9c4;
  background: rgba(38, 22, 8, 0.62);
  padding: 0.5cqh 2cqh;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.game-hint b { color: #ffcf6a; }

/* 상단 MISSION 문구 */
.mission-line {
  position: absolute;
  left: 50.1%;
  top: 6.6%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 3.5cqh;
  font-weight: 800;
  color: #4a3320;
  text-align: center;
  line-height: 1;
}

.mission-name { color: #e8622a; }

/* 제한 시간 pill */
.time-pill {
  position: absolute;
  left: 50.1%;
  top: 14.3%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 3cqh;
  font-weight: 800;
  color: #4a3320;
  line-height: 1;
}

.time-pill #time { color: #e8622a; }
.time-pill.warn #time { color: #e12d2d; }

/* 먹은 개수 뱃지 (웹캠 아래 프레임) */
.eat-count {
  position: absolute;
  left: 50%;
  top: 81%;
  transform: translateX(-50%);
  font-size: 3.2cqh;
  font-weight: 800;
  color: #fff2d8;
  background: rgba(50, 30, 14, 0.82);
  border: 0.3cqh solid #caa06a;
  border-radius: 999px;
  padding: 0.5cqh 3cqh;
  line-height: 1;
  z-index: 5;
}

/* 초밥이 날아다니는 영역 */
.play-area {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

.fly-sushi {
  position: absolute;
  width: 11.5cqh;
  height: 11.5cqh;
  transform: translate(-50%, -50%) rotate(0deg);
  cursor: pointer;
  pointer-events: auto;
  will-change: left, top;
  filter: drop-shadow(0 0.6cqh 0.5cqh rgba(0, 0, 0, 0.35));
}

.fly-sushi img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
}

.fly-sushi.eaten {
  animation: sushi-eaten 0.3s ease forwards;
  pointer-events: none;
}

@keyframes sushi-eaten {
  to { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

.fly-sushi.miss {
  animation: sushi-miss 0.35s ease;
}

@keyframes sushi-miss {
  0%, 100% { filter: drop-shadow(0 0.6cqh 0.5cqh rgba(0, 0, 0, 0.35)); }
  40% { filter: drop-shadow(0 0 1.2cqh rgba(230, 40, 40, 0.95)); }
}

/* 점수 획득 플로팅 텍스트 */
.hit-float {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 3.6cqh;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 6;
  animation: float-up 0.7s ease forwards;
}

.hit-float.bad { color: #ff5a5a; }

@keyframes float-up {
  to { transform: translate(-50%, -190%); opacity: 0; }
}

/* 시작 카운트다운 */
.countdown {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  background: rgba(20, 12, 5, 0.35);
}

.countdown.active { display: flex; }

.countdown span {
  font-size: 24cqh;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1cqh 0 rgba(0, 0, 0, 0.35), 0 0 4cqh rgba(232, 98, 42, 0.9);
  animation: cd-pop 0.85s ease forwards;
}

.countdown span.go { font-size: 14cqh; color: #ffd76a; }

@keyframes cd-pop {
  0% { transform: scale(0.2); opacity: 0; }
  30% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0; }
}

/* 게임 종료 오버레이 - 카메라(웹캠) 화면 중앙에 표시 */
.gameover {
  position: absolute;
  left: 20.70%;
  top: 25.41%;
  width: 58.40%;
  height: 53.98%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(8, 5, 2, 0.66);
  border-radius: 2.2cqh;
  z-index: 40;
  pointer-events: auto;
}

.gameover.show { display: flex; animation: over-in 0.25s ease; }

@keyframes over-in { from { opacity: 0; } to { opacity: 1; } }

.gameover__title {
  font-size: 12cqh;
  font-weight: 900;
  color: #ff5252;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 0.6cqh 0 rgba(0, 0, 0, 0.45), 0 0 4cqh rgba(0, 0, 0, 0.55);
}

.gameover.win .gameover__title {
  color: #ffd76a;
}

.gameover__next {
  position: relative;
  z-index: 41;
  margin-top: 5cqh;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 3.4cqh;
  font-weight: 800;
  font-family: inherit;
  color: #3a2412;
  background: linear-gradient(180deg, #ffd98a, #f0a94a);
  border: 0.35cqh solid #b9772e;
  border-radius: 999px;
  padding: 1.4cqh 6cqh;
  line-height: 1;
  box-shadow: 0 0.5cqh 0 rgba(120, 70, 20, 0.55);
  transition: filter 0.12s ease, transform 0.06s ease;
  pointer-events: auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.gameover__next:hover { filter: brightness(1.06); }
.gameover__next:active { transform: translateY(0.2cqh); }

/* ===== 오버레이 ===== */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(53, 32, 15, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  backdrop-filter: blur(2px);
}

.overlay--hidden { display: none; }

.overlay__card {
  background: #fff8ec;
  border: 6px solid var(--wood-dark);
  border-radius: 22px;
  padding: 48px 44px;
  text-align: center;
  max-width: 460px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.overlay__card h1 {
  font-size: 42px;
  color: var(--accent);
  margin-bottom: 16px;
}

.overlay__card p {
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 30px;
  line-height: 1.55;
}

.overlay__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.btn {
  font-family: inherit;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #f5843f, #e8622a);
  border: none;
  border-radius: 16px;
  padding: 16px 38px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 5px 0 #b8481c;
  transition: transform 0.08s ease;
}

.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b8481c; }

.btn--ghost {
  background: #fff;
  color: var(--wood-dark);
  border: 2px solid var(--wood);
  box-shadow: 0 4px 0 #cdae82;
}

/* ===== 카메라 화면: 웹캠 프리뷰 / 오류 ===== */
.cam-card {
  max-width: 680px;
}

.cam-frame {
  width: 44cqw;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  margin: 6px auto 22px;
  border-radius: 16px;
  overflow: hidden;
  border: 5px solid var(--wood);
  background: #000;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
}

.cam-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1); /* 셀피처럼 좌우 반전 */
}

/* 카메라 시작 버튼 로딩 중 표시 */
.start-hotspot[disabled] {
  cursor: progress;
}

/* ===== 결과 화면 (6번) ===== */
.result-body {
  min-height: 100vh;
  background: #241608;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.result-stage {
  position: relative;
  width: min(1600px, 100vw, calc(100vh * 1440 / 1024));
  aspect-ratio: 1440 / 1024;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, #6b3f22 0%, #4a2b16 55%, #2c190c 100%);
}

.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.result-sushi {
  width: 26cqh;
  height: 26cqh;
  object-fit: contain;
  margin-bottom: 2cqh;
  filter: drop-shadow(0 1cqh 0.9cqh rgba(0, 0, 0, 0.45));
}

.result-title {
  font-size: 12cqh;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 0.6cqh 0 rgba(0, 0, 0, 0.4), 0 0 4cqh rgba(0, 0, 0, 0.5);
}

.is-clear .result-title { color: #79e58c; }
.is-fail .result-title { color: #ff5b5b; }

.result-count {
  margin-top: 3cqh;
  font-size: 5.5cqh;
  font-weight: 800;
  color: #ffe9c4;
}

.result-actions {
  margin-top: 6.5cqh;
  display: flex;
  justify-content: center;
}

.result-next {
  position: relative;
  z-index: 5;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 3.4cqh;
  font-weight: 800;
  font-family: inherit;
  color: #3a2412;
  background: linear-gradient(180deg, #ffd98a, #f0a94a);
  border: 0.35cqh solid #b9772e;
  border-radius: 999px;
  padding: 1.4cqh 6cqh;
  line-height: 1;
  box-shadow: 0 0.5cqh 0 rgba(120, 70, 20, 0.55);
  transition: filter 0.12s ease, transform 0.06s ease;
  pointer-events: auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.result-next:hover { filter: brightness(1.06); }
.result-next:active { transform: translateY(0.2cqh); }