/* ============================================================
   심해 잠수함 탐험 — 스타일(모양과 색)
   이 파일은 "어떻게 보이는지"만 담당해요. (동작은 main.js)

   ★ 모바일 우선(mobile-first) ★
     기본값은 '휴대폰(좁은 세로 화면)'을 기준으로 정했어요.
     화면이 넓어지면(태블릿·컴퓨터) 맨 아래 @media (min-width: …) 에서 더 크게 키워요.
     → 가장 좁은 화면에서 먼저 잘 보이게 만든 뒤, 넓은 화면은 '덤'으로 키우는 방식이에요.
   ============================================================ */

/* ----- 0. 기본값 정리 ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 화면 크기마다 바뀌는 값은 여기 변수로 모아 둬요(아래 @media 에서 갈아끼워요) */
:root {
  /* 잠수함 크기 배율 — 좁은 폰에선 작게(0.6), 넓어지면 0.85 → 1 로 커져요 */
  --sub-scale: 0.6;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 진짜 스크롤 대신, 휠로 잠수함 깊이를 바꿔요 */
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  color: white;
  background: #0a2a43;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ----- 1. 바다 배경 ----- */
#ocean {
  position: fixed;
  inset: 0; /* 위/아래/왼쪽/오른쪽 0 = 화면 가득 (폰이든 컴퓨터든 꽉 차요) */
  z-index: 0;
  /* 배경색은 main.js 가 깊이(층)에 맞게 바꿔요.
     ※ 그라데이션(linear-gradient)은 CSS transition 으로 부드럽게 섞이지 않아서,
        층이 바뀌면 새 색으로 곧바로 바뀌어요. */
  background: linear-gradient(#7ec8f0, #1d76b5);
}

/* 햇빛 줄기 — 수면 근처에서만 보여요 */
#sunrays {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 60%
  );
  opacity: 0.8;
  transition: opacity 1.5s ease;
  animation: shimmer 8s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { transform: translateX(-10%); }
  50% { transform: translateX(10%); }
}

/* 마린 스노우(바다 눈) 알갱이 */
#snow {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.snow-dot {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  from { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  to { transform: translateY(-110vh); opacity: 0; }
}

/* ----- 2. 잠수함 ----- */
#submarine {
  position: fixed;
  left: 50%;
  top: 46%;
  /* 가운데로 옮긴 뒤(translate), 화면 크기에 맞춰 크기를 줄였다 키워요(scale).
     좁은 폰에선 잠수함과 빛줄기가 화면을 다 덮지 않게 작게 보여요. */
  transform: translate(-50%, -50%) scale(var(--sub-scale));
  z-index: 6;
  pointer-events: none; /* 잠수함은 그림일 뿐 — 뒤에 있는 생물 클릭을 막지 않아요 */
  transition: filter 1.5s ease, opacity 1.5s ease;
  /* 아주 깊은 곳에서 main.js 가 filter(어둡게)와 opacity(사라짐)를 바꿔요 */
}

/* 잠수함 불빛 (앞을 비추는 부드러운 빛줄기) */
.sub-light {
  position: absolute;
  left: 148px;
  top: 50%;
  width: 360px;
  height: 240px;
  transform: translateY(-50%);
  /* 잠수함 쪽이 밝고, 멀어질수록·위아래 가장자리로 갈수록 부드럽게 사라져요 */
  background: radial-gradient(
    ellipse 88% 62% at left center,
    rgba(255, 244, 190, 0.5) 0%,
    rgba(255, 240, 170, 0.16) 42%,
    rgba(255, 240, 170, 0) 72%
  );
  /* 잠수함 쪽은 거의 한 점에서 시작해 멀수록 넓게 퍼지는 빛줄기 */
  clip-path: polygon(0 47%, 100% 6%, 100% 94%, 0 53%);
  filter: blur(7px); /* 가장자리를 부드럽게 */
  mix-blend-mode: screen; /* 물 위에 빛을 더하는(밝히는) 느낌 */
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.sub-body {
  position: relative;
  width: 150px;
  height: 70px;
  background: linear-gradient(#ffe14d, #f0b400);
  border-radius: 50px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
/* 앞면(오른쪽) 전조등 램프 — 여기서 빛줄기가 나가요 */
.sub-body::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffdf0, #ffd84d 65%, #d99b00);
  box-shadow: 0 0 12px 3px rgba(255, 240, 170, 0.85);
}
.sub-window {
  position: absolute;
  top: 18px;
  left: 30px;
  width: 34px;
  height: 34px;
  background: radial-gradient(circle at 35% 30%, #cdeafe, #2b6c9e);
  border: 4px solid #c98f00;
  border-radius: 50%;
}
.sub-window.small {
  left: 78px;
  top: 22px;
  width: 24px;
  height: 24px;
}
.sub-fin {
  /* 꼬리지느러미 — 잠수함은 오른쪽을 향하므로 뒤(왼쪽)에 달려요 */
  position: absolute;
  left: -14px;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 26px solid #f0b400;
}
.sub-tower {
  position: absolute;
  top: -22px;
  left: 56px;
  width: 30px;
  height: 26px;
  background: #f0b400;
  border-radius: 8px 8px 0 0;
}
.sub-propeller {
  /* 프로펠러 — 뒤(왼쪽) */
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  color: #f0b400;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}
.sub-bubbles {
  /* 공기방울 — 뒤(왼쪽) 프로펠러 쪽에서 위로 떠올라요 */
  position: absolute;
  left: -40px;
  top: 40%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: subBubble 1.4s ease-in infinite;
}
@keyframes subBubble {
  from { transform: translate(0, 0) scale(0.4); opacity: 0.8; }
  to { transform: translate(-60px, -40px) scale(1); opacity: 0; }
}

/* ----- 3. 바다 생물 ----- */
#creatures {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* 빈 곳은 클릭 통과, 생물만 클릭됨(아래에서 켜요) */
  overflow: hidden;
}
.creature {
  position: absolute;
  font-size: 44px; /* 그림 없는 이모지 예비용 기본 크기(보통은 main.js 가 칸 크기를 정해요) */
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  opacity: 0; /* 나타날 때 서서히 또렷해져요(아래 transition) */
  transition: transform 0.3s ease, opacity 0.8s ease;
  will-change: top, opacity;
}
/* 안쪽 칸 — 위아래로 살랑이는 '물결' 움직임.
   화면 세로 흐름(잠수함이 지나치는 느낌)은 main.js 가 수심에 맞춰 정해요. */
.cr-inner {
  width: 100%;
  height: 100%;
  display: block;
  animation: finBob 3s ease-in-out infinite;
}
@keyframes finBob {
  0%, 100% { transform: translateY(-7%) rotate(-2.5deg); }
  50% { transform: translateY(7%) rotate(2.5deg); }
}
/* 생물 그림(SVG)은 칸을 가득 채워요 */
.creature svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* 그림이 없을 때 쓰는 이모지(예비) — 칸 크기(em)에 맞춰 같이 커지고 작아져요 */
.creature .emoji {
  font-size: 0.86em;
  line-height: 1;
}
/* 스스로 빛나는 생물(생물발광)은 빛 효과를 줘요 */
.creature.glow {
  filter: drop-shadow(0 0 12px rgba(120, 230, 255, 0.95));
}

/* ----- 4. 화면 위 정보(HUD) 공통 -----
   네 귀퉁이 위치는 calc(14px + env(safe-area-inset-…)) 으로 잡아요.
   env(...) = 아이폰 노치·홈 인디케이터 같은 '둥근 모서리/안전영역' 만큼 자동으로 더 띄워 줘요. */
#hud-top,
#hud-buttons,
#gauges,
#hint,
#dive-buttons {
  position: fixed;
  z-index: 10;
}

/* 위쪽 가운데 — 수심 */
#hud-top {
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
#depth-box {
  font-size: 36px; /* 폰 기준 — 넓은 화면에선 46px 로 커져요 */
  font-weight: 800;
  line-height: 1;
}
#depth-box .unit {
  font-size: 18px;
  margin-left: 4px;
  opacity: 0.85;
}
#zone-name {
  margin-top: 6px;
  font-size: 16px;
  letter-spacing: 2px;
  opacity: 0.9;
}

/* 미션 진행도 알약 — 수심·층 이름 아래 (다음 깊이까지 몇 마리 남았는지) */
#mission {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 3px 12px;
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, border-color 0.3s ease;
}
/* 모든 깊이를 다 열면 초록빛으로 바뀌어요 */
#mission.done {
  background: rgba(38, 120, 72, 0.72);
  border-color: rgba(150, 255, 190, 0.5);
}

/* 오른쪽 위 버튼들 */
#hud-buttons {
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
#hud-buttons button,
#dive-buttons button {
  font-family: inherit;
  font-size: 14px;
  /* 폰에서 손가락으로 누르기 좋게 충분한 높이(약 42px)를 줘요 */
  min-height: 42px;
  color: white;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 10px 15px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}
#hud-buttons button:hover,
#dive-buttons button:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* 왼쪽 아래 — 동그란 게이지(공처럼 생긴 구슬) */
#gauges {
  left: calc(14px + env(safe-area-inset-left));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
}
.gauge {
  text-align: center;
  width: 54px;
}
.gauge .ball {
  width: 48px;
  height: 48px;
  margin: 0 auto 6px;
  border-radius: 50%;
  /* 빛이 위에서 비치는 동그란 공처럼 보이게 하는 그라데이션 */
  background: radial-gradient(circle at 32% 28%, #ffffff, #8fd0ff 35%, #1f6fb0 100%);
  box-shadow: inset -6px -8px 14px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.6s ease, background 1.5s ease;
}
.gauge-label {
  font-size: 11px;
  opacity: 0.85;
}
.gauge-value {
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* 아래 가운데 — 안내 문구
   왼쪽 아래 게이지·오른쪽 아래 잠수 버튼 위로 올려서, 긴 잠금 안내가 게이지 값과 겹치지 않게 해요.
   (폰은 좁아서 게이지·버튼이 더 위로 올라오므로 넉넉히 128px 위에 둬요.) */
#hint {
  bottom: calc(128px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.4);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  max-width: 80vw;
  transition: opacity 0.4s ease;
}
#hint.locked {
  background: rgba(150, 40, 40, 0.75);
}

/* 오른쪽 아래 — 내려가기/올라가기 */
#dive-buttons {
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#dive-buttons button {
  width: 52px;
  height: 52px;
  font-size: 22px;
  border-radius: 50%;
  padding: 0;
}

/* 가운데 알림(잠깐 떴다 사라짐) */
#toast {
  position: fixed;
  z-index: 20;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 16px 26px;
  border-radius: 16px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  max-width: 84vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ----- 5. 생물 정보 카드 ----- */
#card-backdrop,
#dex-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hidden {
  display: none !important;
}
#card {
  position: relative;
  width: 340px;
  max-width: 90vw; /* 좁은 폰에서도 화면 밖으로 안 넘쳐요 */
  background: linear-gradient(#10324f, #07192b);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
#card-emoji {
  font-size: 72px;
}
#card-emoji svg {
  width: 110px;
  height: 110px;
}
#card-name {
  margin-top: 6px;
  font-size: 26px;
}
#card-en {
  opacity: 0.7;
  font-style: italic;
  margin-bottom: 14px;
}
#card-info {
  list-style: none;
  text-align: left;
  margin: 0 auto 14px;
  width: fit-content;
  line-height: 1.9;
  font-size: 15px;
}
#card-fact {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.5;
}
#card-close,
#dex-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* ----- 6. 생물도감 패널 ----- */
#dex-backdrop {
  justify-content: flex-end;
}
#dex-panel {
  position: relative;
  width: 420px;
  max-width: 92vw; /* 폰에선 화면을 거의 다 덮는 서랍처럼 열려요 */
  height: 100%;
  background: linear-gradient(#0c2c47, #06182a);
  padding: 20px;
  /* 아이폰 안전영역만큼 안쪽 여백을 더 줘서 닫기 버튼·목록이 모서리에 안 가려요 */
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}
#dex-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
#dex-progress {
  opacity: 0.85;
  margin-bottom: 16px;
}
#dex-grid {
  display: grid;
  /* 폰에선 두 칸 — 넓은 화면에선 세 칸으로 늘어나요 */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* 도감 맨 아래 '근거 보기' 링크 — 목록과 구분되게 위에 여백을 두고, 은은하게 */
#dex-source {
  display: block;
  margin: 20px auto 4px;
  text-align: center;
  font-size: 13px;
  color: #9fc0e0;
  text-decoration: none;
  opacity: 0.85;
}
#dex-source:hover,
#dex-source:focus-visible {
  opacity: 1;
  text-decoration: underline;
}
.dex-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
}
.dex-item .dex-emoji {
  font-size: 38px;
}
.dex-item .dex-emoji svg {
  width: 50px;
  height: 50px;
}
.dex-item .dex-name {
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.3;
}
/* 아직 못 찾은 생물은 검은 그림자로만 보여요 */
.dex-item.locked {
  cursor: default;
}
.dex-item.locked .dex-emoji {
  filter: brightness(0);
  opacity: 0.55;
}
.dex-item.locked .dex-name {
  opacity: 0.5;
}

/* 희귀도 색 점 */
.rarity-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.r-common { background: #9fe6a0; }
.r-uncommon { background: #6fc6ff; }
.r-rare { background: #c89bff; }
.r-legendary { background: #ffd24d; }

/* ----- 7. 시작 화면 ----- */
#start-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: linear-gradient(#7ec8f0, #1d76b5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  transition: opacity 0.8s ease;
}
#start-screen h1 {
  font-size: 32px; /* 폰 기준 — 넓은 화면에선 44px */
  margin-bottom: 16px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
#start-screen p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* 조작 안내 — 출발 버튼과 너무 붙지 않게 위쪽에 숨 쉴 틈을 줘요(margin-top) */
#start-screen .small {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 22px;
}
/* 새로고침하면 초기화된다는 안내 — 조작 안내보다 한 톤 더 작고 흐리게, 더 바짝 붙여요 */
#start-screen .reset-note {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.7;
}
#btn-start {
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  color: #07406b;
  background: white;
  border: none;
  border-radius: 999px;
  padding: 16px 40px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
#btn-start:hover {
  transform: scale(1.06);
}

/* ============================================================
   8. 넓은 화면(태블릿·컴퓨터) 강화
      위까지는 '폰 기준' 이고, 화면이 넓어지면 여기서 더 크게 키워요.
      · 600px 이상  → 글자·게이지·잠수함을 키우고, 도감을 3칸으로
      · 1024px 이상 → 잠수함을 원래 크기(1배)로
   ============================================================ */
@media (min-width: 600px) {
  :root { --sub-scale: 0.85; }

  #depth-box { font-size: 46px; }
  #depth-box .unit { font-size: 22px; }
  #zone-name { font-size: 18px; }
  #mission { font-size: 14px; padding: 4px 14px; }

  /* 넓은 화면(마우스)에선 버튼을 조금 작게 — 손가락만큼 클 필요가 없어요 */
  #hud-buttons button,
  #dive-buttons button { font-size: 15px; padding: 8px 14px; }

  #gauges { gap: 14px; }
  .gauge { width: 64px; }
  .gauge .ball { width: 56px; height: 56px; font-size: 22px; }
  .gauge-label { font-size: 12px; }
  .gauge-value { font-size: 14px; }

  #hint {
    bottom: calc(116px + env(safe-area-inset-bottom));
    font-size: 15px;
    padding: 10px 18px;
    line-height: 1.5;
    max-width: 78vw;
  }

  #dex-grid { grid-template-columns: repeat(3, 1fr); }

  #start-screen h1 { font-size: 44px; }
  #start-screen p { font-size: 18px; }
}

@media (min-width: 1024px) {
  :root { --sub-scale: 1; }
}