*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --sky-top: #6ec6ff;
  --sky-bottom: #b8e6ff;
  --panel-bg: rgba(255, 255, 255, 0.92);
  --accent: #ff8fab;
  --accent-dark: #e85d8a;
  --text: #2d3436;
  --shadow: 0 8px 32px rgba(45, 52, 54, 0.18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* 하단 배너 때문에 UI 가 비켜야 하는 높이(화면 맨 아래 기준). ads.js 가 갱신한다.
     배너는 webview 를 줄이지 않고 그 위에 겹쳐 뜨며, 홈 인디케이터 바로 위에 붙으므로
     이 값은 "safe-area-inset-bottom + 배너 높이 + 여유" 다. 배너가 없으면 0. */
  --banner-reserve: 0px;
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html {
  height: 100%;
  height: 100dvh;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--game-font, 'Jua', sans-serif);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body {
  position: fixed;
  inset: 0;
}

.hidden {
  display: none !important;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  /* safe-area 패딩은 주지 않는다. box-sizing:border-box 라서 캔버스가 그만큼 깎이고,
     자식의 position:absolute 기준이 padding box 라서 자체적으로 --safe-top 을 쓰는
     .hud · .pause-btn 이 safe-area 를 두 번 적용받는다. 안전영역은 UI 가 각자 처리한다.

     아래쪽만 배너 몫을 비운다. 배너를 게임 화면 위에 겹쳐 두면 점프하려고 하단을 누르다
     광고를 눌러 무효 클릭이 되므로(AdMob 계정 제재 사유), 캔버스가 배너 위에서 끝나게 한다.
     캔버스는 height:100% 라 content box 기준이므로 이 패딩만큼 실제로 줄어든다. */
  padding-bottom: var(--banner-reserve);
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: calc(24px + var(--safe-top));
  padding-bottom: calc(24px + var(--safe-bottom));
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
}

.gate-panel {
  background: var(--panel-bg);
  border-radius: 24px;
  padding: 40px 28px;
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 320px;
}

.gate-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
}

.rotate-hint {
  display: inline-block;
  animation: rotatePhone 1.5s ease-in-out infinite;
}

@keyframes rotatePhone {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

.gate-panel h1 {
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 12px;
}

.gate-panel p {
  font-size: 1rem;
  color: #636e72;
  line-height: 1.5;
}

.hud {
  position: absolute;
  /* 상태바(시계·배터리)와 노치·다이내믹 아일랜드는 가리지 않되 그 바로 아래에 붙인다.
     가운데 '최고' 칸이 아일랜드 바로 밑에 오므로, 아일랜드 기기(safe-top 59~62, 아일랜드 하단 48px)는
     48px 에서 멈춘다(패딩 4px 포함 점수 줄 y 52, 아일랜드와 4px). 노치 기기(safe-top 44~50,
     노치 하단 30~35px)는 safe-top - 8px. 노치 없는 기기는 safe-top 이 상태바 높이(20px)
     그 자체라 그 아래 24px 에 둔다. safe-top 이 0 인 환경(웹)은 8px. */
  top: max(8px, min(calc(var(--safe-top) + 4px), 24px), min(calc(var(--safe-top) - 8px), 48px));
  left: var(--safe-left);
  right: var(--safe-right);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px 0;
  pointer-events: none;
  z-index: 10;
}

.score-row {
  display: flex;
  justify-content: space-between;
}

.gauge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: var(--shadow);
}

.gauge-icon {
  font-size: 1rem;
  line-height: 1;
}

/* 픽셀 별 아이콘(이미지) — 게이지 HUD */
img.gauge-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.gauge-track {
  flex: 1;
  height: 10px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  overflow: hidden;
}

.gauge-fill {
  width: 0%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffd24a, #f5a623);
  transition: width 0.18s ease-out;
}

.gauge-fill.full {
  background: linear-gradient(90deg, #ffe680, #ffb300);
  animation: gauge-glow 0.6s ease-in-out infinite;
}

@keyframes gauge-glow {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(255, 200, 60, 0.6); }
  50% { box-shadow: 0 0 10px 3px rgba(255, 200, 60, 0.95); }
}

/* 한 줄: 왼쪽 POING 진행도, 오른쪽 오브 게이지(일반 모드는 코인만) */
.gauge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gauge-row .gauge {
  flex: 1;
  min-width: 0;
}

/* POING 수집 진행도: 먹은 글자만 선명해진다 */
.poing-progress {
  display: flex;
  gap: 4px;
}

.poing-letter {
  width: 26px;
  height: 26px;
  background-image: url('../assets/poing-items-sheet.png');
  background-repeat: no-repeat;
  background-size: 500% 100%;
  image-rendering: pixelated;
  opacity: 0.32;
  filter: grayscale(0.7);
  transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.poing-letter.got {
  opacity: 1;
  filter: none;
  transform: scale(1.12);
}

.synergy {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.syn-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: #8a97a0;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(150, 160, 170, 0.4);
  border-radius: 11px;
  padding: 2px 8px;
  box-shadow: var(--shadow);
}

.syn-badge.active {
  color: var(--syn);
  border-color: var(--syn);
  box-shadow: 0 0 8px color-mix(in srgb, var(--syn) 45%, transparent);
}

.effects {
  display: flex;
  gap: 6px;
  min-height: 0;
}

.effect-badge {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 4px 9px;
  font-size: 0.95rem;
  box-shadow: var(--shadow);
  animation: badge-pop 0.25s ease-out;
}

@keyframes badge-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 시그니처 페어 배지: 1/2 는 흐리게(거의), 2/2 완성은 금빛 강조 */
.pair-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(150, 160, 170, 0.35);
  opacity: 0.5;
}
.pair-badge.active {
  opacity: 1;
  color: #7a4d00;
  background: linear-gradient(90deg, #ffe08a, #ff9ec2);
  border-color: #f6b73c;
  box-shadow: 0 0 8px rgba(246, 183, 60, 0.6);
}

/* 진화 별표(효과 배지 위) */
.evo-star {
  color: #f6b73c;
  margin-left: 1px;
  text-shadow: 0 0 4px rgba(246, 183, 60, 0.7);
}

/* 전설 보유 효과 배지 */
.effect-badge.legend {
  background: linear-gradient(135deg, #ffe08a, #ff9ec2);
  box-shadow: 0 0 8px rgba(255, 170, 90, 0.65);
}

/* 모드 선택 */
.mode-select {
  /* 모드 선택은 버튼이 아니라 탭(알약 모양 스위치)처럼 보이게 해서
     바로 위 분홍 '게임 시작' 버튼과 헷갈리지 않게 한다. */
  display: flex;
  gap: 4px;
  margin: 14px 0 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(110, 198, 255, 0.45);
  border-radius: 999px;
}

.mode-btn {
  flex: 1;
  padding: 9px 8px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: #636e72;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
  -webkit-appearance: none;
  appearance: none;
}

.mode-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #6ec6ff, #3a9ee8);
  box-shadow: 0 2px 8px rgba(58, 158, 232, 0.35);
}

.mode-hint {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 14px;
  min-height: 1em;
}

/* 어드벤처 전용 HUD 요소는 해당 모드에서만 표시 */
/* 일반 모드: 게이지 막대와 별은 숨기고(오브가 없으니) 코인 표시는 남긴다. */
#app:not(.mode-adventure) .poing-progress,
#app:not(.mode-adventure) .gauge-icon,
#app:not(.mode-adventure) .gauge-track {
  display: none;
}

#app:not(.mode-adventure) .gauge {
  background: none;
  box-shadow: none;
  padding: 0;
  justify-content: flex-end;
}

#app:not(.mode-adventure) .coin-hud {
  background: var(--panel-bg);
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: var(--shadow);
}

#app:not(.mode-adventure) #effects {
  display: none;
}

.coin-hud {
  font-size: 0.9rem;
  font-weight: 700;
  color: #b8860b;
  white-space: nowrap;
}

.coin-earned {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #b8860b;
}

.gameover-actions {
  display: flex;
  gap: 8px;
}

.gameover-actions .btn-secondary {
  flex: 1;
  font-size: 0.92rem;
  padding: 13px 6px;
  white-space: nowrap;
}

.coin-earned strong {
  font-size: 1.1rem;
}

.shop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  max-height: 52vh;
  overflow-y: auto;
}

.shop-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  background: rgba(110, 198, 255, 0.1);
  border: 2px solid rgba(110, 198, 255, 0.35);
  border-radius: 14px;
}

.shop-icon {
  font-size: 1.7rem;
  line-height: 1;
}

img.shop-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* 인라인 코인 아이콘(텍스트 중간에 들어가는 🪙 대체) */
.coin-ico {
  height: 1.05em;
  width: auto;
  vertical-align: -0.18em;
  image-rendering: pixelated;
}

/* 인라인 별 아이콘(텍스트 중간에 들어가는 ⭐ 대체) */
.star-ico {
  height: 1.1em;
  width: auto;
  vertical-align: -0.2em;
  image-rendering: pixelated;
}

/* 인라인 상점(카트) 아이콘(텍스트 중간에 들어가는 🛒 대체) */
.cart-ico {
  height: 1.25em;
  width: auto;
  vertical-align: -0.28em;
  image-rendering: pixelated;
}

.shop-info {
  display: flex;
  flex-direction: column;
}

.shop-label {
  font-size: 0.98rem;
  color: var(--text);
  font-weight: 700;
}

.shop-label em {
  font-style: normal;
  font-size: 0.78rem;
  color: #888;
  font-weight: 400;
}

.shop-desc {
  font-size: 0.76rem;
  color: #636e72;
}

.shop-buy {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 9px 12px;
  color: #fff;
  background: linear-gradient(135deg, #ffc24a, #f5a623);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 상점 상단: 지금 고른 모드 표시 */
.shop-mode {
  margin-top: -6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-dark);
}

/* 상점 안 구역 제목(복장 / 강화) */
.shop-section-title {
  margin: 6px 2px 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #636e72;
  text-align: left;
}

/* 고양이 메뉴 */
.cats-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  text-align: left;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  font-family: inherit;
  background: rgba(110, 198, 255, 0.1);
  border: 2px solid rgba(110, 198, 255, 0.35);
  border-radius: 14px;
  cursor: pointer;
}

.cat-card.is-equipped {
  border-color: #7ed6a5;
  background: rgba(126, 214, 165, 0.15);
}

.cat-card .skin-preview {
  width: 56px;
  height: 56px;
}

.cat-card-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2d3436;
  text-align: center;
}

.cat-card-status {
  font-size: 0.72rem;
  color: #636e72;
  white-space: nowrap;
}

.cat-card.is-locked .skin-preview,
.cat-detail.is-locked .skin-preview {
  filter: grayscale(1) brightness(0.9);
  opacity: 0.6;
}

.cat-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.cat-detail .skin-preview {
  width: 96px;
  height: 96px;
}

.cat-detail-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d3436;
}

.shop-empty {
  padding: 12px;
  border: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  font-size: 0.85rem;
  color: #95a5a6;
  text-align: center;
}

/* 상점·고양이 메뉴의 작은 안내 문구 */
.shop-hint {
  margin: 0 2px;
  font-size: 0.72rem;
  color: #95a5a6;
  text-align: left;
}

/* 고양이 상세의 뒤로 버튼: 화면 왼쪽 위 */
#btn-cats-back {
  position: absolute;
  top: 8px;
  left: 4px;
  width: auto;
  margin: 0;
  padding: 8px 12px;
  font-size: 0.85rem;
}

/* 고양이 상세의 전용 특성 설명 */
.cat-trait {
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #2d3436;
  background: rgba(139, 240, 225, 0.18);
  border: 2px solid rgba(80, 200, 190, 0.45);
  border-radius: 14px;
}

/* HUD: 비눗방울물 게이지(비눗방울 고양이 전용) */
.soap-hud {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 10px;
  background: var(--panel-bg);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.soap-hud.hidden {
  display: none;
}

.soap-ico {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}

.soap-pips {
  display: inline-flex;
  gap: 4px;
}

.soap-pips i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
}

.soap-pips i.on {
  background: #5fd8c8;
}

.soap-hud.full .soap-pips i {
  background: #8bf0e1;
  box-shadow: 0 0 6px rgba(95, 216, 200, 0.9);
  animation: gauge-glow 0.6s ease-in-out infinite;
}

/* 설정 화면 */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  text-align: left;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 700;
  color: #2d3436;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(110, 198, 255, 0.35);
  border-radius: 14px;
}

.settings-row--stack {
  flex-direction: column;
  align-items: flex-start;
}

.settings-row--stack .lang-select {
  justify-content: flex-start;
  margin-top: 0;
}

.settings-link {
  text-decoration: none;
}

html:not(.is-native) .native-only {
  display: none;
}

.switch {
  position: relative;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #cfd8dc;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-appearance: none;
}

.switch[aria-checked='true'] {
  background: #7ed6a5;
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

.switch[aria-checked='true'] .switch-knob {
  transform: translateX(22px);
}

/* 복장 미리보기: 준비 동작 시트의 첫 프레임(선 자세)만 보여준다 */
.skin-preview {
  display: inline-block;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 300% 100%;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.skin-preview--default { background-image: url('../assets/cat_jumpready.png'); }
.skin-preview--witch { background-image: url('../assets/cat-witch-jumpready.png'); }
.skin-preview--pajamas { background-image: url('../assets/cat-cloud-pajamas-jumpready.png'); }
.skin-preview--bubble { background-image: url('../assets/cat-bubble-jumpready.png'); }
.skin-preview--grapple { background-image: url('../assets/cat-grapple-idle-sheet.png'); background-size: 400% 100%; }

.shop-item--locked .skin-preview {
  filter: grayscale(1) brightness(0.9);
  opacity: 0.6;
}

.shop-buy.is-equipped {
  background: #7ed6a5;
}

.gift-panel {
  text-align: center;
}
.gift-preview {
  width: 140px;
  height: 140px;
  margin: 4px auto;
  display: block;
  object-fit: contain;
}
.gift-panel .btn-secondary {
  margin-top: 8px;
}

.shop-buy:disabled {
  background: #cfd6db;
  color: #fff;
  cursor: default;
}

.reward-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.reward-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  background: rgba(110, 198, 255, 0.12);
  border: 2px solid rgba(110, 198, 255, 0.5);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
  -webkit-appearance: none;
  appearance: none;
}

.reward-card:active {
  transform: scale(0.97);
  background: rgba(110, 198, 255, 0.24);
}

.reward-art {
  display: block;
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 8px;
}
.reward-art img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.reward-selecting { pointer-events: none; }
.reward-selecting .reward-card:disabled { cursor: default; }
.reward-fx-layer { position: fixed; inset: 0; z-index: 10000; pointer-events: none; overflow: hidden; }
.reward-fx-ghost { display: block; transform-origin: center; }
@media (max-width: 360px) {
  .reward-art { flex-basis: 52px; width: 52px; height: 52px; }
}

/* 아이콘 오른쪽의 텍스트(라벨·설명·대가·진화)를 세로로 쌓는 본문 열 */
.reward-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.reward-icon {
  flex: 0 0 auto;
  font-size: 2rem;
  line-height: 1;
}

img.reward-icon {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
  image-rendering: pixelated;
  align-self: center;
}

/* HUD 효과 뱃지 안 인라인 아이콘 */
.badge-ico {
  height: 1.05em;
  width: auto;
  vertical-align: -0.18em;
  image-rendering: pixelated;
}

.reward-label {
  font-size: 1.1rem;
  color: var(--accent-dark);
  font-weight: 700;
}

.reward-tier {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  border-radius: 8px;
  vertical-align: middle;
}

.reward-level {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #2d7d46;
  background: rgba(45, 125, 70, 0.14);
  border-radius: 8px;
  vertical-align: middle;
}

.reward-tag {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 1px 7px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--syn);
  background: color-mix(in srgb, var(--syn) 14%, transparent);
  border-radius: 8px;
}

.reward-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.reward-actions .btn-secondary {
  flex: 1;
  margin-top: 0;
  padding: 11px 8px;
  font-size: 0.92rem;
}

.reward-actions .btn-secondary:disabled {
  opacity: 0.45;
}

/* 등급별 카드 색 */
.reward-card--common {
  border-color: rgba(154, 167, 176, 0.55);
  background: rgba(154, 167, 176, 0.1);
}
.reward-card--common .reward-tier { background: #9aa7b0; }

.reward-card--rare {
  border-color: #4a90e2;
  background: rgba(74, 144, 226, 0.1);
  box-shadow: 0 0 9px rgba(74, 144, 226, 0.28);
}
.reward-card--rare .reward-label { color: #2f6fc0; }
.reward-card--rare .reward-tier { background: #4a90e2; }

.reward-card--epic {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}
.reward-card--epic .reward-label { color: #8b3fd6; }
.reward-card--epic .reward-tier { background: #a855f7; }

.reward-card--legendary {
  border-color: #f6b73c;
  background: linear-gradient(135deg, rgba(255, 215, 120, 0.18), rgba(255, 120, 180, 0.13));
  box-shadow: 0 0 18px rgba(246, 183, 60, 0.6);
}
.reward-card--legendary .reward-label { color: #b8791a; }
.reward-card--legendary .reward-tier {
  background: linear-gradient(90deg, #f6b73c, #ff7ea6);
}

/* 트레이드오프: 점선 테두리로 '대가 있음'을 시각화 */
.reward-card--tradeoff {
  border-style: dashed;
}

/* 트레이드오프 대가 문구 */
.reward-downside {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #d9483b;
}

/* 진화 표시 */
.reward-evo {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e0872a;
}
.reward-evo.evolved { color: #b8791a; }

.reward-desc {
  font-size: 0.82rem;
  color: #636e72;
}

.score-box {
  background: var(--panel-bg);
  border-radius: 16px;
  padding: 8px 14px;
  box-shadow: var(--shadow);
  text-align: center;
  min-width: 68px;
}

.score-box .label {
  display: block;
  font-size: 0.7rem;
  color: #636e72;
  line-height: 1;
}

.score-box span:last-child {
  font-size: 1.4rem;
  color: var(--text);
  line-height: 1.2;
}

.score-box.best span:last-child {
  color: var(--accent-dark);
}

.score-box.global span:last-child {
  color: #e17055;
}

.charge-bar {
  position: absolute;
  left: 50%;
  /* absolute 의 기준(containing block)은 #app 의 padding box 이고 padding box 는 패딩을
     포함한다. 즉 #app 의 padding-bottom 으로는 이 게이지가 한 픽셀도 올라가지 않는다.
     배너를 피하려면 여기서 직접 올려야 한다. 배너가 없을 때는 24px + 홈 인디케이터. */
  bottom: max(calc(24px + var(--safe-bottom)), calc(8px + var(--banner-reserve)));
  transition: bottom 0.18s ease, opacity 0.2s;
  transform: translateX(-50%);
  width: min(200px, 52vw);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}

.charge-bar.visible {
  opacity: 1;
}

.charge-label {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 6px;
}

.charge-track {
  position: relative;
  height: 10px;
  width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: width 0.2s ease;
}

.charge-fill {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff8fab, #ffb347);
  border-radius: 999px;
  transition: width 0.05s linear;
}

/* 퍼펙트 스윗스팟 밴드 (상한 대비 80~98.5%) */
.charge-perfect {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 80%;
  width: 18.5%;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 240, 170, 0.9),
    rgba(255, 240, 170, 0.9) 3px,
    rgba(255, 210, 90, 0.9) 3px,
    rgba(255, 210, 90, 0.9) 6px
  );
  box-shadow: 0 0 6px rgba(255, 220, 120, 0.9);
  animation: perfect-pulse 0.9s ease-in-out infinite;
}
@keyframes perfect-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 콤보 카운터 — HUD 바로 아래. HUD 는 모드·보유 효과에 따라 높이가 달라지므로
   main.js 가 실제 하단 위치를 --hud-bottom 으로 알려준다. */
.combo {
  position: absolute;
  top: calc(var(--hud-bottom, calc(var(--safe-top) + 70px)) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(45, 52, 54, 0.42);
  color: #fff;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}
.combo.hidden { display: none; }
.combo-x {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffd24a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.combo-mult {
  font-size: 0.68rem;
  opacity: 0.9;
}
.combo.bump { animation: combo-bump 0.22s ease-out; }
@keyframes combo-bump {
  0% { transform: translateX(-50%) scale(1.35); }
  100% { transform: translateX(-50%) scale(1); }
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: rgba(110, 198, 255, 0.35);
  backdrop-filter: blur(4px);
  z-index: 20;
  padding: 20px;
  /* 내용이 화면보다 길면 잘리지 않고 스크롤되게 한다.
     (align-items:center 로는 넘칠 때 위쪽이 잘려 도달 불가) */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom), calc(12px + var(--banner-reserve)));
}

.overlay.hidden,
.hud.hidden,
.charge-bar.hidden {
  display: none;
}

/* 메뉴 화면(시작·고양이·상점·튜토리얼)은 팝업이 아니라 화면 전체를 쓴다.
   게임 중에 뜨는 일시정지·게임오버·보상·선물은 기존 팝업(.panel) 그대로. */
.overlay--full {
  background: linear-gradient(180deg, #d6eeff 0%, #eef8ff 40%, #ffffff 100%);
  backdrop-filter: none;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom), calc(12px + var(--banner-reserve))) max(16px, env(safe-area-inset-left));
}

.overlay--full > .panel {
  display: flex;
  flex-direction: column;
  max-width: 440px;
  min-height: 100%;
  margin: 0 auto;
  padding: 8px 4px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  animation: fadeIn 0.2s ease-out;
}

/* 닫기 버튼은 화면 아래쪽에 붙고, 목록이 길어 스크롤해도 늘 보인다 */
.overlay--full > .panel {
  position: relative;
}

.overlay--full > .panel > .btn-primary:last-child {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: auto;
  /* 버튼 둘레를 배경 아래쪽 색(흰색)으로 덮어 스크롤된 목록이 버튼 밑으로 비치지 않게 */
  box-shadow: 0 4px 16px rgba(232, 93, 138, 0.4), 0 0 0 16px #ffffff;
}

/* 전체 화면에서는 목록이 따로 스크롤되지 않고 화면째 스크롤된다 */
.overlay--full .shop-list {
  max-height: none;
  overflow: visible;
}

/* 시작 화면: 픽셀 하늘 배경 위에 내용을 바로 올리고 세로 가운데 정렬 */
#start-screen {
  background: #b9c2d6 url('../assets/sky-bg.png') center / cover no-repeat;
  image-rendering: pixelated;
}

#start-screen > .panel {
  justify-content: center;
}

/* 어드벤처 모드를 고르면 시작 화면 배경이 보랏빛 별 하늘로 서서히 바뀐다 */
#start-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #7a5fb0 url('../assets/menu-bg-adventure.png') center / cover no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

#start-screen.is-adventure::before {
  opacity: 1;
}

#start-screen > .panel {
  z-index: 1;
}

/* 어두운 배경 위 글자는 흰색으로 */
#start-screen.is-adventure .title,
#start-screen.is-adventure .subtitle,
#start-screen.is-adventure .controls,
#start-screen.is-adventure .touch-hint.sub,
#start-screen.is-adventure .mode-hint,
#start-screen.is-adventure .best-record,
#start-screen.is-adventure .install-hint {
  color: #fff;
  text-shadow: 0 1px 3px rgba(40, 20, 80, 0.55);
}

#start-screen.is-adventure .best-record strong {
  color: #ffe27a;
}

/* 흰 패널이 없어졌으니 하늘 위에서도 읽히도록 버튼은 불투명하게, 옅은 글자는 진하게 */
.overlay--full .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
}

#start-screen .touch-hint.sub,
#start-screen .install-hint,
#start-screen .mode-hint {
  color: #5d6d7e;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panel {
  background: var(--panel-bg);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: var(--shadow);
  text-align: center;
  width: 100%;
  max-width: 320px;
  animation: popIn 0.35s ease-out;
  /* 자동 마진 중앙정렬: 공간이 남으면 가운데, 넘치면 0이 되어 잘리지 않는다 */
  margin: auto;
  flex-shrink: 0;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.title {
  font-size: 1.65rem;
  color: var(--text);
  margin-bottom: 8px;
}

.subtitle {
  font-size: 0.95rem;
  color: #636e72;
  margin-bottom: 16px;
}

.cat-preview {
  width: 100%;
  max-width: 210px;
  margin: 8px auto 14px;
  border-radius: 16px;
  overflow: hidden;
  animation: gentleFloat 2.4s ease-in-out infinite;
}

.cat-preview img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.controls {
  font-size: 0.9rem;
  color: #636e72;
  margin-bottom: 20px;
  line-height: 1.6;
}

.touch-hint {
  display: block;
}

.touch-hint.sub {
  margin-top: 6px;
  font-size: 0.82rem;
  color: #b2bec3;
}

.btn-primary {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 16px 24px;
  font-family: inherit;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(232, 93, 138, 0.4);
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-appearance: none;
  appearance: none;
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(232, 93, 138, 0.35);
}

.btn-secondary {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px 24px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--accent-dark);
  background: rgba(110, 198, 255, 0.16);
  border: 2px solid rgba(110, 198, 255, 0.55);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
  -webkit-appearance: none;
  appearance: none;
}

.btn-secondary:active {
  transform: scale(0.97);
  background: rgba(110, 198, 255, 0.28);
}

.btn-secondary:disabled {
  opacity: 0.6;
}

/* 아이콘 + 텍스트 버튼(예: 공유) */
.btn-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-with-icon .btn-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* 보상형 광고 버튼(코인 2배) — 눈에 띄는 황금빛 */
.btn-reward {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: #6b4b00;
  background: linear-gradient(135deg, #ffe08a, #ffb347);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 179, 71, 0.45);
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-appearance: none;
  appearance: none;
}

.btn-reward:active {
  transform: scale(0.97);
}

.btn-reward:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-reward.hidden {
  display: none;
}

/* 광고 보고 이어하기 — 코인 2배 버튼과 구분되도록 초록(continue) 계열 */
.btn-revive {
  color: #06422a;
  background: linear-gradient(135deg, #9ff2c0, #3ddc84);
  box-shadow: 0 4px 14px rgba(61, 220, 132, 0.45);
}

/* 플레이 중 우측의 일시정지 버튼 — 콤보와 같은 줄, HUD 바로 아래 */
.pause-btn {
  position: absolute;
  top: calc(var(--hud-bottom, calc(var(--safe-top) + 70px)) + 8px);
  right: calc(var(--safe-right) + 14px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(45, 52, 54, 0.32);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 15;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.1s;
}

.pause-btn:active {
  transform: scale(0.92);
}

.pause-btn.hidden {
  display: none;
}

/* 내 기록 · 전체 기록을 한 줄에 나란히(좁으면 자동 줄바꿈) */
.records {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin-top: 14px;
}

.best-record {
  margin: 0;
  font-size: 0.9rem;
  color: #636e72;
}

.best-record strong {
  color: var(--accent-dark);
  font-size: 1.05rem;
}

.best-record.global-record {
  margin-top: 0;
}

.best-record.global-record strong {
  color: #e17055;
}

.install-hint {
  margin-top: 12px;
  font-size: 0.75rem;
  color: #b2bec3;
  line-height: 1.4;
}

.gameover-cat {
  display: block;
  width: 128px;
  height: 128px;
  margin: 8px auto 0;
  object-fit: contain;
  animation: cat-sob 1.4s ease-in-out infinite;
}

@keyframes cat-sob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(4px) rotate(1.5deg); }
}

.result {
  margin: 16px 0;
}

.result p:first-child {
  color: #636e72;
  font-size: 0.9rem;
}

.big-number {
  font-size: 3rem;
  color: var(--accent-dark);
  line-height: 1.1;
}

.unit {
  color: #636e72;
  font-size: 1rem;
}

.new-record {
  color: var(--accent-dark);
  font-size: 1.05rem;
  margin-bottom: 16px;
  animation: pulse 0.8s ease-in-out infinite;
}

.new-record.hidden {
  display: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 손쉬운 사용 > 동작 줄이기: 장식용 반복 애니메이션을 최소화한다.
   (화면 흔들림은 game.js에서 별도로 비활성화) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 어드벤처 튜토리얼 안내 리스트 */
.tutorial-list {
  list-style: none;
  margin: 14px 0 6px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tutorial-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text);
}

.tutorial-list strong {
  font-weight: 700;
}

.tut-ico {
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.tut-ico .cart-ico {
  width: 24px;
  height: 24px;
}

/* 언어 선택기 (시작 화면 하단) */
.lang-label {
  margin-top: 14px;
  font-size: 0.78rem;
  color: #8a97a0;
  text-align: center;
}
.lang-label::before {
  content: "🌐 ";
}
.lang-select {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.lang-btn {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid rgba(150, 160, 170, 0.5);
  background: rgba(255, 255, 255, 0.6);
  color: #636e72;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.lang-btn.active {
  border-color: #6ec6ff;
  background: #6ec6ff;
  color: #fff;
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────────
   시작 화면 압축 레이아웃
   메뉴 항목이 많아(모드 선택·시작·상점·사운드·기록·안내·언어) 작은
   화면에서는 패널이 세로로 넘친다. 어드벤처 모드를 고르면 상점 버튼이
   더해져(main.js) 한 줄 더 길어진다. 아래 규칙으로 밀도를 높인다.
   ─────────────────────────────────────────────────────────────── */

/* 상점·사운드를 한 줄에. 상점이 .hidden 이면 사운드가 폭을 다 쓴다. */
.menu-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.menu-actions .btn-secondary {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
}

/* 시작 화면: 갖고 있는 소모품을 켜고 시작하는 칩 */
.consumable-arm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 2px;
}

.consumable-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid rgba(110, 198, 255, 0.5);
  background: rgba(255, 255, 255, 0.8);
  color: #5b6b78;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.consumable-chip .chip-ico {
  height: 1.2em;
  width: auto;
  image-rendering: pixelated;
}

.consumable-chip.armed {
  background: linear-gradient(135deg, #ffd24a, #f5a623);
  border-color: rgba(245, 166, 35, 0.6);
  color: #fff;
}

/* 코인 + 사운드 한 줄 */
.wallet-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
  border: 2px solid rgba(110, 198, 255, 0.5);
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 보유 코인 — 상점 버튼 안에 넣으면 자릿수가 늘 때 버튼이 비좁아져 따로 뺐다. */
.wallet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 210, 74, 0.18);
  border: 2px solid rgba(245, 166, 35, 0.35);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

/* 네이티브 앱에서는 "홈 화면에 추가" 안내가 의미 없다(이미 앱). */
.is-native .pwa-only {
  display: none;
}

/* 세로가 짧은 기기: 여백·글자·미리보기를 단계적으로 줄인다.
   (iPhone SE 667pt, 일반 기기의 가로 모드 등) */
@media (max-height: 780px) {
  .panel {
    padding: 20px 18px;
  }
  .title {
    font-size: 1.45rem;
    margin-bottom: 6px;
  }
  .subtitle {
    margin-bottom: 10px;
  }
  .cat-preview {
    max-width: 170px;
    margin: 4px auto 10px;
  }
  .controls {
    margin-bottom: 14px;
  }
  .mode-select {
    margin: 10px 0 4px;
  }
  .mode-hint {
    margin-bottom: 10px;
  }
  .btn-primary {
    padding: 13px 20px;
    font-size: 1.05rem;
  }
  .btn-secondary {
    padding: 11px 16px;
  }
  .records {
    margin-top: 10px;
  }
  .install-hint,
  .lang-label {
    margin-top: 8px;
  }
}

/* iPhone SE(667pt) 급: 전체 화면 시작 메뉴가 스크롤 없이 들어가게 조금 더 줄인다 */
@media (max-height: 700px) {
  .overlay--full > .panel {
    padding: 0 4px;
  }
  .cat-preview {
    max-width: 120px;
    margin: 2px auto 8px;
  }
  .controls {
    margin-bottom: 10px;
  }
}

@media (max-height: 660px) {
  .cat-preview {
    max-width: 130px;
  }
  /* 조작 설명 둘째 줄과 언어 라벨은 없어도 뜻이 통한다 */
  .touch-hint.sub,
  .lang-label {
    display: none;
  }
  .lang-select {
    margin-top: 10px;
  }
  .subtitle {
    display: none;
  }
}