/* 식물 키우기 — 게임풍(C) 스타일 */
:root {
  --u: min(1vw, 1.6vh);            /* 화면 크기에 맞춰 커지는 단위 */
  --ink: #4a2a12;                  /* 진한 갈색 외곽선 */
  --cream: #fff6dc;
  --yellow-1: #ffe76b; --yellow-2: #ffb21f;
  --green-1: #9cf06a; --green-2: #34b52a; --green-ink: #1f6b17;
  --blue-1: #8fd8ff; --blue-2: #2f9bff;
  --water: #36a8ff;
  --sun: #ffc21a;
  --ok-zone: #c9f5a6;
  --font: 'Jua', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
html { word-break: keep-all; } /* 한국어 줄바꿈을 낱말 단위로 */
body {
  background: #7fd2ff;
  color: var(--ink);
  font-family: var(--font);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
img { -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

#app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* ---------- 글씨 ---------- */
.outlined {
  color: #fff;
  -webkit-text-stroke: calc(var(--u) * .9) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * .8) 0 var(--ink);
}

/* ---------- 젤리 버튼 ---------- */
.jelly {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2);
  min-height: 64px;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 4);
  border: calc(var(--u) * .55) solid var(--ink);
  border-radius: calc(var(--u) * 3);
  background: linear-gradient(var(--yellow-1), var(--yellow-2));
  box-shadow: inset 0 calc(var(--u) * -1) 0 rgba(0,0,0,.14), 0 calc(var(--u) * .9) 0 var(--ink);
  font-size: calc(var(--u) * 4);
  color: var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.jelly::after { /* 윗부분 광택 */
  content: ''; position: absolute; left: 8%; right: 8%; top: 10%; height: 28%;
  border-radius: 99px; background: rgba(255,255,255,.55); pointer-events: none;
}
.jelly:active { transform: translateY(calc(var(--u) * .7)) scale(.97); box-shadow: inset 0 calc(var(--u) * -1) 0 rgba(0,0,0,.14), 0 calc(var(--u) * .2) 0 var(--ink); }
.jelly.green { background: linear-gradient(var(--green-1), var(--green-2)); color: #fff; }
.jelly.green span { -webkit-text-stroke: calc(var(--u) * .45) var(--green-ink); paint-order: stroke fill; }
.jelly.blue { background: linear-gradient(var(--blue-1), var(--blue-2)); color: #fff; }
.jelly.blue span { -webkit-text-stroke: calc(var(--u) * .45) #164f8a; paint-order: stroke fill; }

/* ---------- 시작 화면 ---------- */
.start .title {
  position: absolute; left: 0; right: 0; top: 9%;
  margin: 0; text-align: center;
  font-size: calc(var(--u) * 12); letter-spacing: calc(var(--u) * .4);
  animation: drop-in .7s cubic-bezier(.2,1.6,.4,1) both;
}
.start .go {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  font-size: calc(var(--u) * 5.5); padding: calc(var(--u) * 2) calc(var(--u) * 9);
  animation: pulse 1.6s ease-in-out infinite;
}
.start .go:active { transform: translateX(-50%) translateY(calc(var(--u) * .7)) scale(.97); animation: none; }

/* ---------- 방 화면 ---------- */
.chip {
  position: absolute; left: 2.5%; top: 3.5%;
  display: flex; align-items: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * .6) calc(var(--u) * 2.4) calc(var(--u) * .6) calc(var(--u) * .8);
  background: var(--cream); border: calc(var(--u) * .5) solid var(--ink); border-radius: 99px;
  box-shadow: 0 calc(var(--u) * .6) 0 var(--ink);
  font-size: calc(var(--u) * 3.4);
}
.chip img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }

.gauges {
  position: absolute; left: 50%; top: 2.5%; transform: translateX(-58%);
  width: min(48vw, calc(var(--u) * 52));
  display: grid; gap: calc(var(--u) * .8);
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  background: rgba(255, 246, 220, .92); border: calc(var(--u) * .5) solid var(--ink); border-radius: calc(var(--u) * 3);
  box-shadow: 0 calc(var(--u) * .7) 0 var(--ink);
}
.gauge { display: grid; grid-template-columns: calc(var(--u) * 5) 1fr; align-items: center; gap: calc(var(--u) * 1.2); }
.gauge img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.bar {
  position: relative; height: calc(var(--u) * 3); overflow: hidden;
  background: #fff; border: calc(var(--u) * .45) solid var(--ink); border-radius: 99px;
}
.bar .ok { position: absolute; top: 0; bottom: 0; background: var(--ok-zone); }
.bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  transition: width .25s ease;
}
.bar .fill::after { content: ''; position: absolute; left: 6%; right: 6%; top: 14%; height: 30%; border-radius: 99px; background: rgba(255,255,255,.55); }
.bar.water .fill { background: linear-gradient(#7fd0ff, var(--water)); }
.bar.sun .fill { background: linear-gradient(#ffe680, var(--sun)); }
.bar.bad { animation: shake .5s ease-in-out infinite; }

.tools {
  position: absolute; right: 2.2%; top: 50%; transform: translateY(-50%);
  display: grid; gap: calc(var(--u) * 1.8);
}
.tool {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: max(80px, calc(var(--u) * 13)); height: max(80px, calc(var(--u) * 13));
  background: linear-gradient(#fffaf0, #ffe2a8);
  border: calc(var(--u) * .5) solid var(--ink); border-radius: calc(var(--u) * 3);
  box-shadow: inset 0 calc(var(--u) * -.8) 0 rgba(0,0,0,.08), 0 calc(var(--u) * .8) 0 var(--ink);
  font-size: calc(var(--u) * 2.4);
  transition: transform .08s ease;
}
.tool img { width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.tool:active { transform: translateY(calc(var(--u) * .6)) scale(.95); }
.tool.locked { filter: saturate(.25) brightness(.95); }
.tool .lock { position: absolute; right: -10%; top: -10%; width: 42%; height: 42%; filter: none; }

/* 장면 판: 배경 그림(1536×1024)과 같은 비율로 화면을 덮는다.
   화분을 이 판의 % 좌표로 놓으면 화면 비율이 달라도 늘 창턱의 같은 자리에 놓인다. */
.scene {
  /* 화면이 가로로 길면 위아래가 잘린다. 창문 쪽(위)은 30%만, 창턱 아래 벽(아래)은 70% 잘라서
     화분 위 공간을 넉넉히 남긴다 */
  position: absolute; left: 50%; top: calc((100vh - max(66.667vw, 100vh)) * .3);
  width: max(100vw, 150vh); height: max(66.667vw, 100vh);
  transform: translateX(-50%);
  background-size: 100% 100%;
}

/* 화분과 식물 (bg-room 기준: 나무 창턱 윗면 = 배경 높이 47.5%~83%, 그 아래는 창턱 앞면)
   밑바닥은 윗면 위 76%에 놓고, 테두리(52%)도 윗면 안에 들어오게 크기를 정한다.
   화분 그림: 바닥 = 그림 높이의 93%, 보이는 높이 = 그림 폭의 84% */
.stage {
  container-type: inline-size; /* 아래 효과들은 화분 너비(cqw) 기준으로 크기와 위치를 잡는다 */
  position: absolute; left: 46%; top: 76%;
  width: 19%; transform: translate(-50%, -93%);
}
.stage .pot { position: relative; display: block; width: 100%; z-index: 1; }
.stage .shadow { /* 창턱에 닿는 접촉 그림자 + 넓게 퍼지는 그림자 */
  position: absolute; left: 4%; right: 4%; top: 86%; height: 16%;
  background:
    radial-gradient(50% 50% at 50% 40%, rgba(70, 32, 8, .55) 0%, rgba(70, 32, 8, .35) 45%, transparent 75%),
    radial-gradient(60% 60% at 52% 55%, rgba(70, 32, 8, .22) 0%, transparent 80%);
  z-index: 0;
}
.stage .plant-wrap {
  position: absolute; left: 50%; bottom: 70%; /* 화분 흙 높이 */
  width: 118%; transform: translateX(-50%); z-index: 2;
  transform-origin: 50% 100%;
}
.stage .plant {
  display: block; width: 100%;
  /* 식물 그림에 딸린 흙더미를 아래쪽부터 흐리게 해서, 줄기가 화분 흙에서 바로 나오게 보인다 */
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 4%);
  mask-image: linear-gradient(to top, transparent 0, #000 4%);
  transform-origin: 50% 100%;
  animation: sway 3.2s ease-in-out infinite;
}
.stage .plant.pop { animation: pop .6s cubic-bezier(.2,1.8,.4,1), sway 3.2s ease-in-out .6s infinite; }
.stage .plant.droopy { animation: droop 1.2s ease-in-out infinite; filter: saturate(.55) brightness(.95); }
.stage .plant.ready { filter: drop-shadow(0 0 calc(var(--u) * 1.6) rgba(255, 240, 120, .95)); }
.stage .plant.wilted { animation: none; }


.bubble {
  position: absolute; left: 88%; bottom: 55%; transform: translateX(-50%);
  padding: calc(var(--u) * .6) calc(var(--u) * 2);
  background: #fff; border: calc(var(--u) * .5) solid var(--ink); border-radius: 99px;
  box-shadow: 0 calc(var(--u) * .6) 0 var(--ink);
  font-size: calc(var(--u) * 5); white-space: nowrap; z-index: 3;
  animation: bob .7s ease-in-out infinite alternate;
}
.stage[data-stage="seed"] .bubble { left: 78%; bottom: 14%; } /* 씨앗 그림은 아래 24%에만 있다 */
.bubble { transition: opacity .15s ease; }
.stage.busy .bubble { opacity: 0; }
.bubble::after { /* 식물 쪽을 가리키는 꼬리 */
  content: ''; position: absolute; left: calc(var(--u) * -2.2); top: 50%; transform: translateY(-50%);
  border: calc(var(--u) * 1.2) solid transparent; border-right-color: var(--ink);
}

/* 물주기 · 햇빛 효과 (화분 너비 = 100cqw, 흙 윗면 = 위에서 25cqw)
   물조리개는 -35도 기울었을 때 입구가 식물 오른쪽 위 (68cqw, -30cqw)에 오도록 놓는다.
   (더 높이 두면 큰 화면에서 게이지 판 뒤로 숨는다) */
.fx { position: absolute; pointer-events: none; z-index: 5; }
.fx-can {
  width: 55cqw; left: 63cqw; top: -66cqw;
  animation: can-pour 1s ease-in-out forwards;
}
.fx-drop {
  width: 3.4cqw; height: 5cqw;
  background: linear-gradient(#bfe7ff, var(--water)); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: drop-fall .6s ease-in forwards;
}
.fx-sun { /* 식물 왼쪽 위에서 비춘다 (배경의 빛 방향, 오른쪽 물조리개와 안 겹침, 게이지 판 아래) */
  width: 55cqw; left: -62cqw; top: -64cqw;
  animation: sun-shine 1.2s ease-out forwards;
}
.fx-spark {
  width: calc(var(--u) * 3); height: calc(var(--u) * 3);
  background: radial-gradient(circle, #fff 0 20%, #ffe14d 21% 45%, transparent 46%);
  animation: spark .9s ease-out forwards;
}
.fx-crop { width: calc(var(--u) * 10); animation: crop-fly 1.1s cubic-bezier(.2,.8,.3,1) forwards; }

/* 수확 버튼: 고른 화분 바로 아래 가운데 (화분이 몇 개든 화면 안에 있다) */
.harvest {
  position: absolute; left: 50%; top: calc(100% + var(--u) * .6);
  white-space: nowrap; min-height: 64px;
  font-size: calc(var(--u) * 3.2); padding: calc(var(--u) * .5) calc(var(--u) * 2.6);
  --tx: -50%; transform: translateX(-50%);
  animation: pulse 1.1s ease-in-out infinite; z-index: 6;
}
.harvest:active { animation: none; transform: translateX(-50%) translateY(calc(var(--u) * .7)) scale(.97); } /* 눌러도 가운데 그대로 */

/* 팝업 카드 (씨앗 고르기, 시든 힌트, 수확 축하) */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40, 20, 5, .35);
  animation: fade .2s ease both;
}
.card {
  position: relative;
  max-width: 88vw;
  padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 3.5);
  background: linear-gradient(#fffbea, #ffeec2);
  border: calc(var(--u) * .7) solid var(--ink); border-radius: calc(var(--u) * 4);
  box-shadow: 0 calc(var(--u) * 1.2) 0 var(--ink), 0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,0,.25);
  text-align: center;
  animation: card-in .45s cubic-bezier(.2,1.6,.4,1) both;
}
.card h2 { margin: 0 0 calc(var(--u) * 2.2); font-size: calc(var(--u) * 5.4); font-weight: normal; }
.seeds { display: flex; gap: calc(var(--u) * 2); justify-content: center; flex-wrap: wrap; }
.seed-card {
  width: max(96px, calc(var(--u) * 13.5));
  padding: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 1.4);
  background: #fff; border: calc(var(--u) * .5) solid var(--ink); border-radius: calc(var(--u) * 2.6);
  box-shadow: 0 calc(var(--u) * .8) 0 var(--ink);
  font-size: calc(var(--u) * 3);
  transition: transform .08s ease;
}
.seed-card:active { transform: translateY(calc(var(--u) * .6)) scale(.96); }
.seed-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.seed-card .time { display: block; font-size: calc(var(--u) * 2.2); color: #8a6a45; margin-top: calc(var(--u) * .4); }
.hint-icon { font-size: calc(var(--u) * 10); line-height: 1.1; }
.hint-text { font-size: calc(var(--u) * 4); margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 3); line-height: 1.35; }
/* 카드 속 작은 화분 (방 화면의 .stage와 같은 비율) */
.mini-pot { position: relative; width: calc(var(--u) * 13); margin-top: calc(var(--u) * 9); }
.mini-pot-img { display: block; width: 100%; }
.mini-plant {
  position: absolute; left: 50%; bottom: 70%; width: 118%; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 4%);
  mask-image: linear-gradient(to top, transparent 0, #000 4%);
}
.big-crop { width: calc(var(--u) * 26); animation: pop .7s cubic-bezier(.2,1.8,.4,1) both; }

.toast {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  background: #fff; border: calc(var(--u) * .5) solid var(--ink); border-radius: 99px;
  box-shadow: 0 calc(var(--u) * .6) 0 var(--ink);
  font-size: calc(var(--u) * 3.4); z-index: 30;
  animation: toast 1.6s ease forwards;
}

/* 세로 화면 안내 */
.rotate {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 16px;
  background: linear-gradient(#7fd2ff, #c8eeff); font-size: 28px; text-align: center; padding: 24px;
}
.rotate .phone { font-size: 72px; animation: turn 1.6s ease-in-out infinite; }
@media (orientation: portrait) { .rotate { display: flex; } }

/* ---------- 움직임 ---------- */
@keyframes drop-in { from { transform: translateY(-60%) scale(.6); opacity: 0; } }
@keyframes pulse { 0%, 100% { transform: translateX(var(--tx, -50%)); } 50% { transform: translateX(var(--tx, -50%)) scale(1.06); } }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes pop { 0% { transform: scale(.4, .3); } 60% { transform: scale(1.12, .92); } 100% { transform: scale(1); } }
@keyframes droop { 0%, 100% { transform: rotate(-4deg) scaleY(.9); } 50% { transform: rotate(3deg) scaleY(.88); } }
@keyframes bob { to { transform: translateX(-50%) translateY(calc(var(--u) * -1.2)); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes can-pour {
  0% { transform: translate(40%, -20%) rotate(0); opacity: 0; }
  20% { transform: translate(0, 0) rotate(-10deg); opacity: 1; }
  40%, 80% { transform: translate(0, 0) rotate(-35deg); opacity: 1; }
  100% { transform: translate(30%, -10%) rotate(0); opacity: 0; }
}
@keyframes drop-fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(55cqw); opacity: 0; } }
@keyframes sun-shine {
  0% { transform: scale(.3) rotate(-30deg); opacity: 0; }
  35% { transform: scale(1.1) rotate(0); opacity: 1; filter: drop-shadow(0 0 30px #ffe14d); }
  75% { transform: scale(1) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 50px #ffe14d); }
  100% { transform: scale(.8) rotate(20deg); opacity: 0; }
}
@keyframes spark { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0; } }
@keyframes crop-fly { 0% { transform: translateY(0) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--u) * -30)) scale(1.1); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes card-in { from { transform: scale(.6); opacity: 0; } }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 30%); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -30%); } }
@keyframes turn { 50% { transform: rotate(-90deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 홈 화면 추가 안내 */
.install-hint {
  position: absolute; right: 2%; bottom: 4%; width: min(27vw, 340px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4);
  background: rgba(255, 251, 234, .95); border: calc(var(--u) * .5) solid var(--ink); border-radius: calc(var(--u) * 2.6);
  box-shadow: 0 calc(var(--u) * .7) 0 var(--ink);
  font-size: calc(var(--u) * 2.1); line-height: 1.4; text-align: center;
}
.install-hint .x { position: absolute; right: 0; top: 0; }
.install-hint .jelly { font-size: calc(var(--u) * 2.8); min-height: 64px; padding: calc(var(--u) * .8) calc(var(--u) * 2.4); }
.install-hint .x { min-width: 64px; min-height: 64px; font-size: calc(var(--u) * 3); }
.hint-row { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.install-hint > span { padding: 0 calc(var(--u) * 3.6); margin-top: calc(var(--u) * 1.4); }

/* ================= 2단계: 메인 · 상점 · 바구니 ================= */
button.chip { cursor: pointer; min-height: 64px; transition: transform .08s ease; }
button.chip:active { transform: translateY(calc(var(--u) * .5)) scale(.96); }
.badge {
  position: absolute; right: calc(var(--u) * -1.2); top: calc(var(--u) * -1.2);
  min-width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); padding: 0 calc(var(--u) * .8);
  display: grid; place-items: center;
  background: #ff5a4f; color: #fff; border: calc(var(--u) * .45) solid var(--ink); border-radius: 99px;
  font-size: calc(var(--u) * 2.6);
}
.badge[hidden] { display: none; }

.coinbar {
  position: absolute; right: 2.5%; top: 3.5%;
  display: flex; align-items: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * .5) calc(var(--u) * 2.6) calc(var(--u) * .5) calc(var(--u) * .7);
  background: var(--cream); border: calc(var(--u) * .5) solid var(--ink); border-radius: 99px;
  box-shadow: 0 calc(var(--u) * .6) 0 var(--ink);
  font-size: calc(var(--u) * 4);
}
.coinbar img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.coinbar.bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.15); } }
.fly-coin {
  position: absolute; z-index: 60; width: calc(var(--u) * 5); height: calc(var(--u) * 5);
  margin: calc(var(--u) * -2.5) 0 0 calc(var(--u) * -2.5); pointer-events: none;
  animation: coin-fly .7s cubic-bezier(.5, -0.3, .7, 1) both;
}
@keyframes coin-fly {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: 1; transform: translate(0, calc(var(--u) * -4)) scale(1.1); }
  100% { transform: translate(var(--dx), var(--dy)) scale(.7); opacity: .9; }
}

/* 메인 화면 (스케치 2) */
.home .chip { left: 2.5%; top: 3.5%; position: absolute; }
.home-title {
  position: absolute; left: 0; right: 0; top: 4%; margin: 0; text-align: center;
  font-size: calc(var(--u) * 6.4); font-weight: normal; pointer-events: none;
}
.home-center {
  position: absolute; left: 0; right: 0; top: 15%; bottom: 25%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6);
}
.home .circle {
  position: relative; flex: 0 1 auto; height: min(100%, 36vw); max-height: calc(100% - var(--u) * 8); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fffef4 0%, #e9f9d9 55%, #bfe9a2 100%);
  border: calc(var(--u) * .9) solid var(--ink);
  box-shadow: 0 calc(var(--u) * 1.1) 0 var(--ink), inset 0 calc(var(--u) * -2) 0 rgba(80, 140, 40, .18);
  overflow: hidden;
}
.home .circle:active { transform: scale(.98); }
.circle-inner { position: absolute; left: 0; right: 0; bottom: 9%; display: flex; justify-content: center; }
.mini-pot.big { width: 40%; margin: 0; }
.mini-plant.droopy { filter: saturate(.55); transform: translateX(-50%) rotate(-5deg); transform-origin: 50% 100%; }
.circle-label {
  white-space: nowrap; padding: calc(var(--u) * .6) calc(var(--u) * 2.4);
  background: var(--cream); border: calc(var(--u) * .45) solid var(--ink); border-radius: 99px;
  font-size: calc(var(--u) * 3);
}
.circle-label.alert { background: #fff1a8; --tx: 0; animation: pulse 1.2s ease-in-out infinite; }
.home-btns {
  position: absolute; left: 4%; right: 4%; bottom: 5%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%;
}
.home-btns .jelly { font-size: calc(var(--u) * 4); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); white-space: nowrap; }
.jelly img { width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); object-fit: contain; position: relative; z-index: 1; }
.jelly span { position: relative; z-index: 1; }
.jelly.locked-btn { background: linear-gradient(#f2efe6, #d9d3c4); filter: saturate(.6); }
.jelly .lock { position: absolute; right: -4%; top: -22%; width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); }

/* 상점 */
.shop-overlay { z-index: 40; background: rgba(40, 20, 5, .45); }
.panel {
  position: relative; width: min(94vw, calc(var(--u) * 150)); height: min(90vh, 92%);
  display: flex; flex-direction: column;
  background-size: cover; background-position: center;
  border: calc(var(--u) * .8) solid var(--ink); border-radius: calc(var(--u) * 4);
  box-shadow: 0 calc(var(--u) * 1.2) 0 var(--ink), 0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,0,.3);
  overflow: hidden; animation: card-in .4s cubic-bezier(.2,1.5,.4,1) both;
}
.panel-head { position: relative; display: flex; align-items: center; padding: calc(var(--u) * 1.6) calc(var(--u) * 3) 0; min-height: calc(var(--u) * 9); }
.panel-head h2 { margin: 0; display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 5); font-weight: normal; }
.panel-head h2 img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.panel .coinbar { position: static; margin-left: auto; margin-right: calc(var(--u) * 2); }
.close {
  min-width: 64px; min-height: 64px; display: grid; place-items: center;
  background: var(--cream); border: calc(var(--u) * .5) solid var(--ink); border-radius: 50%;
  box-shadow: 0 calc(var(--u) * .5) 0 var(--ink); font-size: calc(var(--u) * 3.6);
}
.close:active { transform: translateY(2px); }
.tabs { display: flex; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.6) calc(var(--u) * 3) 0; }
.tab {
  display: flex; align-items: center; gap: calc(var(--u) * 1); min-height: 64px;
  padding: 0 calc(var(--u) * 3);
  background: rgba(255, 246, 220, .85); border: calc(var(--u) * .5) solid var(--ink);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 2.6) 0 0; border-bottom-width: 0;
  font-size: calc(var(--u) * 3.6); color: #8a6a45;
}
.tab img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.tab.on { background: var(--cream); color: var(--ink); transform: translateY(calc(var(--u) * .5)); }
.shelf {
  flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(var(--u) * 3) calc(var(--u) * 3);
  padding: calc(var(--u) * 2.4);
  background: rgba(255, 246, 220, .94); border: calc(var(--u) * .5) solid var(--ink);
  border-radius: 0 calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2);
}
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); width: 100%; }
.item {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .4);
  padding: calc(var(--u) * 1.2);
  background: #fff; border: calc(var(--u) * .45) solid var(--ink); border-radius: calc(var(--u) * 2.4);
  box-shadow: 0 calc(var(--u) * .6) 0 var(--ink);
  text-align: center;
}
.pic-wrap { position: relative; width: 62%; }
.item-pic { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.owned-badge {
  position: absolute; right: -14%; top: -6%; min-width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6);
  display: grid; place-items: center; padding: 0 calc(var(--u) * .6);
  background: #ff8a1f; color: #fff; border: calc(var(--u) * .4) solid var(--ink); border-radius: 99px;
  font-size: calc(var(--u) * 2.6);
}
.item-pic.pop { animation: pop .5s cubic-bezier(.2,1.8,.4,1); }
.item-name { font-size: calc(var(--u) * 3); white-space: nowrap; }
.item-name b { color: #e2611b; }
.item-sub { font-size: calc(var(--u) * 2); color: #8a6a45; white-space: nowrap; margin-bottom: calc(var(--u) * .6); }
.owned { font-size: calc(var(--u) * 2.2); color: var(--green-ink); min-height: 1.3em; }
.item .jelly { width: 100%; min-height: 64px; padding: calc(var(--u) * .4) calc(var(--u) * .4); font-size: calc(var(--u) * 2.8); white-space: nowrap; gap: calc(var(--u) * .5); }
.item .jelly .coin-i, .item .jelly img { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); }
.item .jelly img { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.item.short .buy { filter: grayscale(.7) brightness(.95); }
.sell-all { font-size: calc(var(--u) * 4.2); padding: calc(var(--u) * 1.4) calc(var(--u) * 6); }
.empty { margin: auto; text-align: center; font-size: calc(var(--u) * 3.8); line-height: 1.5; }
.empty img { width: calc(var(--u) * 13); }

/* 바구니 */
.basket-card { width: min(88vw, calc(var(--u) * 130)); max-height: 92vh; }
.basket-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 4); }
.basket-cols section { background: rgba(255,255,255,.55); border-radius: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.4) calc(var(--u) * 2); }
.basket-card .close { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 2); }
.basket-card h2, .basket-card h3 { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); }
.basket-card h3 { margin: 0 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 4); font-weight: normal; }
.h-icon { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.mini-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.4); }
.mini-item {
  display: flex; flex-direction: column; align-items: center; width: calc(var(--u) * 12.5);
  padding: calc(var(--u) * .8); background: #fff; border: calc(var(--u) * .4) solid var(--ink); border-radius: calc(var(--u) * 2);
  font-size: calc(var(--u) * 2.6);
}
.mini-item img { width: 80%; aspect-ratio: 1; object-fit: contain; }
.mini-item b { color: #e2611b; font-size: calc(var(--u) * 3); }
.none { margin: 0; color: #8a6a45; font-size: calc(var(--u) * 3); }
.basket-card .go-sell { margin-top: calc(var(--u) * 3); }

/* 방: 씨앗 고르기 · 수확 카드 */
.seed-card .count { color: #e2611b; }
.go-shop { margin-top: calc(var(--u) * 2.4); }
.go-shop.small { font-size: calc(var(--u) * 3); padding: calc(var(--u) * .8) calc(var(--u) * 3); }
.empty-pic { width: calc(var(--u) * 18); }
.btn-row { display: flex; gap: calc(var(--u) * 2.4); justify-content: center; }
.inline-icon { width: 1.4em; height: 1.4em; vertical-align: -.35em; margin-right: .2em; }
.room .home-btn { position: absolute; z-index: 25; } /* 씨앗 고르기·시든 카드(20)가 떠 있어도 메인으로 갈 수 있게 */

.coin-i { width: 1.15em; height: 1.15em; vertical-align: -.22em; margin-right: .12em; }
.shelf { justify-content: flex-start; }

/* 상점·바구니는 세로 공간이 빠듯하다: 가로로 긴 화면(갤럭시탭)에서는 높이를 기준으로 줄인다 */
.panel, .basket-card { --u: min(1vw, 1.25vh); }
.item-sub { margin-bottom: 0; }
.item .jelly { margin-top: calc(var(--u) * .8); }

.toast { white-space: nowrap; }

.toast { z-index: 70; } /* 상점(40)·날아가는 동전(60) 위에 */
.item.sold-out { opacity: .45; }
.item.sold-out .sell { pointer-events: none; }

/* ================= 3-1단계: 화분 여러 개 · 장소 · 레벨 ================= */
.stage { cursor: pointer; }
.stage.selected .shadow { /* 고른 화분: 바닥에 노란 빛 고리 */
  background:
    radial-gradient(50% 50% at 50% 45%, rgba(255, 226, 80, .95) 0%, rgba(255, 200, 40, .55) 50%, transparent 76%),
    radial-gradient(60% 60% at 52% 55%, rgba(70, 32, 8, .25) 0%, transparent 80%);
  animation: glow 1.4s ease-in-out infinite;
}
@keyframes glow { 50% { opacity: .65; } }
.stage:not(.selected) .pot { filter: brightness(.96); }
.empty-tag {
  position: absolute; left: 50%; top: -6%; transform: translateX(-50%); z-index: 3;
  padding: calc(var(--u) * .4) calc(var(--u) * 1.6);
  background: rgba(255, 251, 234, .95); border: calc(var(--u) * .4) solid var(--ink); border-radius: 99px;
  box-shadow: 0 calc(var(--u) * .4) 0 var(--ink);
  font-size: calc(var(--u) * 2.6); white-space: nowrap; display: none;
}
.stage.empty .empty-tag { display: block; animation: bob .8s ease-in-out infinite alternate; --tx: 0; }
.stage.empty .empty-tag { transform: translateX(-50%); }
.stage.add-pot {
  position: absolute; transform: translate(-50%, -93%); padding: 0; border: 0; background: none;
  container-type: inline-size;
}
.stage.add-pot .pot { opacity: .45; filter: grayscale(.4); }
.add-label {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 2;
  padding: calc(var(--u) * .6) calc(var(--u) * 1.6); line-height: 1.25;
  background: var(--cream); border: calc(var(--u) * .45) solid var(--ink); border-radius: calc(var(--u) * 2);
  box-shadow: 0 calc(var(--u) * .5) 0 var(--ink);
  font-size: calc(var(--u) * 2.6); white-space: nowrap; text-align: center;
}
.stage.add-pot.locked .add-label { background: #ece6d6; color: #7a6650; }

/* 비 */
.rain-fx { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.rain-fx > img {
  position: absolute; left: 50%; top: 4%; width: calc(var(--u) * 26); transform: translateX(-62%);
  animation: cloud-in 1.8s ease both;
}
@keyframes cloud-in { 0% { opacity: 0; transform: translate(-62%, -40%) scale(.7); } 15%, 80% { opacity: 1; transform: translate(-62%, 0) scale(1); } 100% { opacity: 0; } }
.rain-drop {
  position: absolute; top: 18%; width: calc(var(--u) * .7); height: calc(var(--u) * 3.2);
  background: linear-gradient(transparent, #4fb3ff); border-radius: 99px; opacity: 0;
  animation: rain-fall .7s linear 2;
}
@keyframes rain-fall { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: .9; transform: translateY(55vh); } }

/* 알림 점 */
.alert-dot {
  position: absolute; right: -8%; top: -10%; z-index: 4;
  width: calc(var(--u) * 5); height: calc(var(--u) * 5); display: grid; place-items: center;
  background: #ff4b3e; color: #fff; border: calc(var(--u) * .45) solid var(--ink); border-radius: 50%;
  font-size: calc(var(--u) * 3.2); animation: pulse 1s ease-in-out infinite; --tx: 0;
}
.alert-dot[hidden] { display: none; }
.tool .place-name { white-space: nowrap; }

/* 씨앗 고르기 닫기 */
.card > .close { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 2); }
.xp-gain { color: #e2a400; margin-left: .3em; }

/* 메인: 레벨 */
.home .top-left { position: absolute; left: 2.5%; top: 3.5%; display: flex; gap: calc(var(--u) * 1.4); }
.home .top-left .chip { position: relative; left: auto; top: auto; }
.level-chip { gap: calc(var(--u) * .8); }
.level-chip .lv { font-size: calc(var(--u) * 3); white-space: nowrap; }
.xp { width: calc(var(--u) * 10); height: calc(var(--u) * 2); background: #fff; border: calc(var(--u) * .35) solid var(--ink); border-radius: 99px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(#ffe56b, #ffb21f); transition: width .4s ease; }
.home-btns .jelly { position: relative; }

/* 상점: 잠긴 씨앗 */
.item.row-locked .pic-wrap { filter: grayscale(.85) brightness(.9); }
.lock-note { margin-top: calc(var(--u) * .8); min-height: 64px; display: grid; place-items: center; font-size: calc(var(--u) * 2.6); color: #7a6650; }

/* 장소 목록 */
.places-card { width: min(84vw, calc(var(--u) * 110)); }
.place-list { display: grid; gap: calc(var(--u) * 1.6); }
.place-row {
  display: grid; grid-template-columns: calc(var(--u) * 20) 1fr auto; align-items: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.2); background: #fff; border: calc(var(--u) * .45) solid var(--ink); border-radius: calc(var(--u) * 2.4);
  text-align: left;
}
.place-row.not-owned { background: #f6f1e4; }
.place-thumb { position: relative; aspect-ratio: 3 / 2; border-radius: calc(var(--u) * 1.6); background-size: cover; background-position: center; border: calc(var(--u) * .35) solid var(--ink); }
.place-row.not-owned .place-thumb { filter: grayscale(.5) brightness(.95); }
.place-info b { display: block; font-size: calc(var(--u) * 4); font-weight: normal; }
.place-info small { font-size: calc(var(--u) * 2.4); color: #8a6a45; }
.place-actions { display: flex; gap: calc(var(--u) * 1.2); align-items: center; }
.place-actions .jelly { font-size: calc(var(--u) * 3); padding: calc(var(--u) * .8) calc(var(--u) * 2.4); white-space: nowrap; }
.place-actions .jelly[disabled] { filter: grayscale(.8); opacity: .7; }
.here { font-size: calc(var(--u) * 2.8); color: var(--green-ink); white-space: nowrap; }
.locked-note { font-size: calc(var(--u) * 3); color: #7a6650; white-space: nowrap; }

/* 레벨업 */
.levelup-overlay { z-index: 50; }
.levelup-card { overflow: hidden; min-width: min(70vw, calc(var(--u) * 80)); }
.levelup-card .rays {
  position: absolute; left: 50%; top: 22%; width: 220%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 214, 80, .35) 0 10deg, transparent 10deg 20deg);
  animation: spin 12s linear infinite; pointer-events: none;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.levelup-star { position: relative; width: calc(var(--u) * 20); animation: pop .8s cubic-bezier(.2,1.8,.4,1) both; }
.levelup-card h2 { position: relative; font-size: calc(var(--u) * 8); margin: 0 0 calc(var(--u) * 1); }
.unlocks { position: relative; list-style: none; padding: 0; margin: 0 0 calc(var(--u) * 3); font-size: calc(var(--u) * 3.6); line-height: 1.6; }

/* 3-1 다듬기 */
.tool:not(.locked) .lock { display: none; }               /* 열린 버튼에는 자물쇠가 없다 */
.rain-fx > img { top: 24%; }                                /* 비구름은 게이지 판 아래에서 */
.home .top-left { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.2); } /* 제목과 겹치지 않게 세로로 */
.home .top-left .chip { min-height: 0; padding-top: calc(var(--u) * .4); padding-bottom: calc(var(--u) * .4); }
.home .top-left .basket-btn { min-height: 64px; }
/* 상점: 씨앗 10종이 두 줄로 다 보이게 카드를 줄인다 */
.cards { gap: calc(var(--u) * 1.2); }
.item { padding: calc(var(--u) * .8) calc(var(--u) * 1); gap: 0; }
.pic-wrap { width: 46%; }
.item-name { font-size: calc(var(--u) * 2.8); }
.item .jelly, .lock-note { min-height: 64px; } /* 손가락으로 누르기 쉬운 크기 (64px) */

.pic-wrap { width: 40%; }
.item-sub { font-size: calc(var(--u) * 1.9); letter-spacing: -.02em; }
.panel { height: min(94vh, 96%); }
.home-title { font-size: calc(var(--u) * 5.4); }
.xp { width: calc(var(--u) * 7); }
.item-sub { white-space: normal; display: flex; flex-wrap: wrap; justify-content: center; column-gap: .5em; } /* 좁으면 두 줄로 */
.item-sub span { white-space: nowrap; }
.shelf { padding-top: calc(var(--u) * 1.6); padding-bottom: calc(var(--u) * 1.6); }
.shelf { padding-top: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * 1.2); }

/* 다음 목표 안내 */
.home .goal {
  flex: none;
  padding: calc(var(--u) * .5) calc(var(--u) * 2.4);
  background: #fff6c2; border: calc(var(--u) * .4) solid var(--ink); border-radius: 99px;
  box-shadow: 0 calc(var(--u) * .4) 0 var(--ink);
  font-size: calc(var(--u) * 2.8); white-space: nowrap;
}
.home .goal[hidden] { display: none; }
.home-center { top: calc(4% + var(--u) * 8.5); } /* 제목 바로 아래부터: 목표 띠 → 동그라미 → 상태 */
.next-goal { margin: 0 0 calc(var(--u) * 2); font-size: calc(var(--u) * 3); color: #b26a00; }
.levelup-card .next-goal { position: relative; }
.locked-note { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.locked-note small { font-size: calc(var(--u) * 2); }

/* 카드가 화면보다 크지 않게: 그림은 화면 높이에 맞춰 줄인다 */
.card { max-height: 94vh; }
.big-crop { width: min(calc(var(--u) * 26), 30vh); }

/* 닫기 X: 카드 오른쪽 위 모서리 바깥에 걸쳐서, 제목·내용 글자를 가리지 않는다 */
.card > .close, .basket-card .close {
  position: absolute; right: calc(var(--u) * -2.2); top: calc(var(--u) * -2.2); z-index: 5;
  background: #fff; box-shadow: 0 calc(var(--u) * .5) 0 var(--ink);
}
.card { overflow: visible; }
.levelup-card { overflow: hidden; }

/* 고른 화분: 노란 테두리 빛 + 살짝 크게, 다른 화분은 살짝 어둡게 */
.stage.selected .pot { /* 화분 둘레에 진한 노란 테두리 + 빛 */
  filter: drop-shadow(1.1cqw 0 0 #ffc400) drop-shadow(-1.1cqw 0 0 #ffc400) drop-shadow(0 1.1cqw 0 #ffc400) drop-shadow(0 -1.1cqw 0 #ffc400)
          drop-shadow(0 0 2.5cqw rgba(255, 210, 0, .9));
  animation: sel-pulse 1.2s ease-in-out infinite;
}
@keyframes sel-pulse { 50% { filter: drop-shadow(1.1cqw 0 0 #ffe066) drop-shadow(-1.1cqw 0 0 #ffe066) drop-shadow(0 1.1cqw 0 #ffe066) drop-shadow(0 -1.1cqw 0 #ffe066) drop-shadow(0 0 4cqw rgba(255, 230, 80, 1)); } }
.stage.selected { transform: translate(-50%, -93%) scale(1.06); z-index: 2; transition: transform .15s ease; }
.stage:not(.selected):not(.add-pot) .pot { filter: brightness(.88) saturate(.9); }
.stage:not(.selected) .plant:not(.ready) { filter: brightness(.92); }
.stage { transition: transform .15s ease; }

/* 레벨 안내 */
.level-chip { cursor: pointer; min-height: 52px; }
.help-q {
  display: grid; place-items: center; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6);
  background: #4fb3ff; color: #fff; border: calc(var(--u) * .35) solid var(--ink); border-radius: 50%;
  font-size: calc(var(--u) * 2.4);
}
.help-card { width: min(84vw, calc(var(--u) * 110)); }
.help-how { font-size: calc(var(--u) * 3); line-height: 1.55; margin: 0 0 calc(var(--u) * 1.6); }
.help-now { display: inline-block; margin-bottom: calc(var(--u) * 1.8); padding: calc(var(--u) * .5) calc(var(--u) * 2.4); background: #fff6c2; border: calc(var(--u) * .4) solid var(--ink); border-radius: 99px; font-size: calc(var(--u) * 3); }
.help-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1); text-align: left; }
.help-levels li { display: grid; grid-template-columns: calc(var(--u) * 13) 1fr auto; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1) calc(var(--u) * 2); background: #fff; border: calc(var(--u) * .4) solid var(--ink); border-radius: calc(var(--u) * 2); font-size: calc(var(--u) * 2.8); }
.help-levels li.open { background: #e9f9d9; }
.help-levels .lvl { color: #b26a00; }
.help-levels .state { white-space: nowrap; color: #7a6650; }
.help-levels li.open .state { color: var(--green-ink); }

/* ================= 3-2단계: 텃밭 ================= */
/* 밭 그림은 화분보다 낮고 넓다. 식물은 밭 흙 가운데에서 자란다 (값은 plot 그림을 재서 정함) */
/* plot 그림: 나무틀 밑바닥 = 그림 높이 72%, 흙 가운데 = 48% (위에서) */
.stage.ground { transform: translate(-50%, -72%); }
.stage.ground.selected { transform: translate(-50%, -72%) scale(1.06); }
.stage.ground .plant-wrap { bottom: 50%; width: 92%; }
.stage.ground .shadow { top: 62%; height: 16%; }
.stage.ground .bubble { bottom: 60%; }
.stage.ground .empty-tag { top: 22%; }
.stage.ground .harvest { top: 76%; }
.stage.ground.selected .pot {
  filter: drop-shadow(.9cqw 0 0 #ffc400) drop-shadow(-.9cqw 0 0 #ffc400) drop-shadow(0 .9cqw 0 #ffc400) drop-shadow(0 -.9cqw 0 #ffc400) drop-shadow(0 0 2.5cqw rgba(255, 210, 0, .9));
}
.mini-pot.ground .mini-plant { bottom: 50%; width: 92%; }
.mini-pot.ground { margin-bottom: -18%; }
.seed-card.ground-only { opacity: .55; filter: grayscale(.6); cursor: default; }
.seed-card.ground-only .time { color: #6b8e23; }
.ground-tag {
  position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); white-space: nowrap;
  padding: 0 calc(var(--u) * .8); background: #e9f9d9; border: calc(var(--u) * .3) solid var(--ink); border-radius: 99px;
  font-size: calc(var(--u) * 1.8);
}
.shelf { scrollbar-width: thin; }
.stage.add-pot.ground { transform: translate(-50%, -72%); }
.stage.selected { z-index: 200 !important; } /* 고른 칸(과 그 수확 버튼)은 앞줄 식물보다 앞에 */
.harvest.bottom { position: absolute; left: 44%; top: auto; bottom: 3%; z-index: 30; font-size: calc(var(--u) * 3.6); }
.harvest.bottom:active { transform: translateX(-50%) translateY(calc(var(--u) * .7)) scale(.97); }

/* 상점: 줄 버튼 */
.row-chips { display: flex; gap: calc(var(--u) * 1.2); align-self: flex-start; }
.row-chip {
  min-height: 52px; padding: 0 calc(var(--u) * 2.6);
  background: #fff; border: calc(var(--u) * .4) solid var(--ink); border-radius: 99px;
  box-shadow: 0 calc(var(--u) * .4) 0 var(--ink); font-size: calc(var(--u) * 3); color: #8a6a45;
}
.row-chip.on { background: linear-gradient(var(--yellow-1), var(--yellow-2)); color: var(--ink); }
.row-chip.locked { background: #ece6d6; }
/* 장소 목록: 장소가 4곳이어도 카드 안에 */
.places-card { max-height: 94vh; display: flex; flex-direction: column; }
.place-list { overflow-y: auto; gap: calc(var(--u) * 1.1); }
.place-row { grid-template-columns: calc(var(--u) * 15) 1fr auto; padding: calc(var(--u) * .8) calc(var(--u) * 1.2); }
.place-info b { font-size: calc(var(--u) * 3.4); }
.places-card h2 { margin-bottom: calc(var(--u) * 1.2); }
/* 메인 목표 띠: 왼쪽 위 버튼들을 덮지 않게 */
.home .goal { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
.ground-tag { left: -10%; top: -8%; bottom: auto; transform: none; }   /* 그림 왼쪽 위 모서리 (이름을 덮지 않게) */
/* 장소 목록: 2×2 칸 */
.place-list { grid-template-columns: 1fr 1fr; }
.place-row { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1); }
.place-thumb { width: 100%; aspect-ratio: 16 / 7; }
.place-info b, .place-info small { display: block; }
.place-actions { justify-content: center; flex-wrap: wrap; min-height: 64px; }
.places-card { width: min(90vw, calc(var(--u) * 120)); }
.place-thumb { aspect-ratio: 3 / 1; }
.place-list { flex: 1; min-height: 0; }
.place-row { gap: calc(var(--u) * .5); }
.place-info small { font-size: calc(var(--u) * 2.2); }
.places-card { --u: min(1vw, 1.2vh); }
.place-thumb { aspect-ratio: auto; height: calc(var(--u) * 11); }
.place-thumb { height: calc(var(--u) * 9.5); }
.places-card h2 { margin-bottom: calc(var(--u) * .8); }
.place-thumb { background-position: center 28%; }

.harvest.bottom { z-index: 17; }   /* 비구름(15) 위, 카드·장소 목록(20) 아래 */
.row-chip, .level-chip { min-height: 64px; }