:root {
  --ink: #3d4a3a;
  --ink-soft: #6b7a66;
  --cream: #fffaf0;
  --glass: rgba(255, 252, 244, 0.86);
  --line: rgba(120, 140, 100, 0.22);
  --green: #6fb36a;
  --green-dark: #4f9450;
  --gold: #e8b64f;
  --sky: #dcebe4;
  --shadow: 0 8px 24px rgba(70, 90, 70, 0.16), 0 2px 6px rgba(70, 90, 70, 0.1);
  --font: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --title: 'Jua', 'Gowun Dodum', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #e6efdc; color: var(--ink); font-family: var(--font);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
#app { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; cursor: grab; }
#map.dragging { cursor: grabbing; }
#map.can-place { cursor: pointer; }

/* 상단 바 */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.back-btn {
  text-decoration: none; color: var(--ink); background: var(--glass);
  padding: 8px 13px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap;
}
.back-btn:hover { background: #fff; }
.brand { font-family: var(--title); font-size: 20px; color: var(--green-dark); text-shadow: 0 1px 0 #fff; white-space: nowrap; }
.score-box {
  margin-left: auto; background: var(--glass); border-radius: 16px; padding: 4px 14px 5px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; min-width: 78px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.score-box small { font-size: 11px; color: var(--ink-soft); }
.score-box strong { font-family: var(--title); font-size: 22px; line-height: 1.05; font-weight: 400; }
.score-box.bump strong { animation: bump 0.4s ease; }
@keyframes bump { 40% { transform: scale(1.25); color: var(--green-dark); } }
.top-actions { display: flex; gap: 8px; margin-left: auto; }
.score-box:not([hidden]) + .top-actions { margin-left: 0; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--glass); box-shadow: var(--shadow);
  font-size: 18px; display: grid; place-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.icon-btn:hover { background: #fff; }

/* 퀘스트 목록 */
.quests {
  position: absolute; z-index: 4; left: 14px; top: calc(66px + env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: 8px; max-width: 220px;
}
.quest {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 9px; border: 0; text-align: left;
  background: var(--glass); border-radius: 14px; box-shadow: var(--shadow); font-size: 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: slideIn 0.4s ease both; transition: opacity 0.6s, transform 0.6s;
}
.quest .qi { font-size: 20px; width: 26px; text-align: center; }
.quest .qt { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.quest .qn { white-space: nowrap; }
.quest .qn b { font-family: var(--title); font-weight: 400; font-size: 16px; }
.quest .bar { height: 5px; background: rgba(120, 140, 100, 0.18); border-radius: 3px; overflow: hidden; }
.quest .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fd08a, #5fae63); border-radius: 3px; transition: width 0.4s; }
.quest.done { background: #e8f8df; }
.quest.done .bar i { background: #f0c35a; }
.quest.failed { opacity: 0.55; filter: grayscale(0.8); }
.quest.gone { opacity: 0; transform: translateX(-20px); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } }

/* 알림 */
.toasts { position: absolute; z-index: 6; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  background: rgba(255, 252, 244, 0.95); padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow);
  font-size: 15px; white-space: nowrap; animation: toastIn 2.6s ease forwards;
}
.toast.gold { background: #fff3cf; }
.toast.green { background: #e3f6d9; }
.toast.warn { background: #ffe9e2; }
@keyframes toastIn { 0% { opacity: 0; transform: translateY(-10px) scale(0.95); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* 아래 손패 */
.dock {
  position: absolute; z-index: 5; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.dock > * { pointer-events: auto; }
.dock-row { display: flex; align-items: center; gap: 14px; }
.round-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--glass); box-shadow: var(--shadow);
  font-size: 24px; display: grid; place-items: center; transition: transform 0.15s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.round-btn:hover { background: #fff; }
.round-btn:active { transform: scale(0.92); }
.stack-card { position: relative; width: 116px; height: 116px; display: grid; place-items: center; }
.stack-shadow {
  position: absolute; inset: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 240, 0.95) 0 58%, rgba(255, 252, 240, 0) 72%);
}
#cur { position: relative; width: 108px; height: 108px; transition: transform 0.28s cubic-bezier(.3, 1.4, .5, 1); filter: drop-shadow(0 6px 8px rgba(60, 80, 60, 0.25)); }
.stack-card.pop #cur { animation: pop 0.35s ease; }
@keyframes pop { from { opacity: 0; scale: 0.6; } }
.stack-count {
  position: absolute; right: -8px; bottom: -4px; background: var(--ink); color: #fff; border-radius: 14px; padding: 3px 9px 4px;
  display: flex; flex-direction: column; align-items: center; line-height: 1; box-shadow: var(--shadow);
}
.stack-count strong { font-family: var(--title); font-weight: 400; font-size: 18px; }
.stack-count small { font-size: 9px; opacity: 0.8; margin-top: 2px; }
.stack-count.low { background: #d9735f; }
.cur-quest { background: #fff3cf; border-radius: 999px; padding: 5px 12px; font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; }
.place-btn, .discard-btn {
  border: 0; border-radius: 999px; padding: 11px 22px; font-size: 16px; box-shadow: var(--shadow);
  background: var(--green); color: #fff; font-family: var(--title);
}
.discard-btn { background: #d9a35f; }
.sub-row { display: flex; align-items: center; gap: 10px; }
.chip-btn {
  border: 0; border-radius: 999px; padding: 7px 13px; font-size: 13px; background: var(--glass); box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap;
}
.chip-btn:disabled { opacity: 0.45; cursor: default; }
.chip-btn:not(:disabled):hover { background: #fff; }
.next-strip {
  display: flex; align-items: center; gap: 4px; background: var(--glass); border-radius: 999px; padding: 3px 10px 3px 12px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.next-strip small { white-space: nowrap; font-size: 12px; color: var(--ink-soft); margin-right: 2px; }
.next-strip canvas { width: 30px; height: 30px; }
.next-strip canvas.empty { opacity: 0.15; }
.hint { font-size: 13px; color: var(--ink-soft); background: rgba(255, 252, 244, 0.75); border-radius: 999px; padding: 4px 12px; text-align: center; transition: opacity 0.6s; pointer-events: none; }
.hint:empty { display: none; }
.hint.fade { opacity: 0; }

.after { position: absolute; z-index: 5; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; }

/* 오버레이 */
.overlay {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(250, 248, 236, 0.35), rgba(225, 236, 214, 0.55));
  animation: fadeIn 0.5s ease both;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.title-screen { background: radial-gradient(ellipse at center, rgba(255, 252, 240, 0.55) 0, rgba(255, 252, 240, 0.25) 45%, rgba(230, 240, 220, 0) 75%); }
.title-card { text-align: center; max-width: 520px; width: 100%; animation: rise 0.8s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); }
.title-card h1 {
  margin: 0; font-family: var(--title); font-weight: 400; font-size: clamp(52px, 14vw, 92px); line-height: 1;
  color: #4f9450; text-shadow: 0 3px 0 #fff, 0 10px 30px rgba(80, 120, 60, 0.25);
}
.title-card h1 .t2 { color: #e0a63c; }
.tagline {
  display: inline-block; font-size: 17px; line-height: 1.6; margin: 14px 0 22px; padding: 8px 18px; border-radius: 18px;
  background: rgba(255, 252, 240, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(70, 90, 70, 0.08);
}
.title-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.big-btn.alt { background: linear-gradient(180deg, #f2cf7e, #e0a63c); box-shadow: 0 6px 0 #b9852b, 0 14px 26px rgba(150, 110, 40, 0.3); }
.big-btn small { font-family: var(--font); font-size: 14px; opacity: 0.9; }
.mid-btn {
  border: 0; border-radius: 999px; padding: 10px 24px; font-size: 17px; font-family: var(--title);
  background: rgba(255, 252, 240, 0.92); color: var(--ink); box-shadow: 0 4px 0 #d5ccb2, 0 10px 20px rgba(70, 90, 70, 0.15);
}
.mid-btn small { font-family: var(--font); font-size: 13px; color: var(--ink-soft); }
.mid-btn:hover { background: #fff; }
.coach {
  display: flex; align-items: center; gap: 10px; max-width: min(460px, calc(100vw - 24px));
  background: #fffaf0; border: 2px solid #f0d58a; border-radius: 16px; padding: 9px 10px 9px 14px; box-shadow: var(--shadow);
  font-size: 14px; line-height: 1.45; animation: rise 0.4s ease both;
}
.coach button { border: 0; border-radius: 999px; background: var(--green); color: #fff; padding: 6px 12px; font-size: 13px; white-space: nowrap; font-family: var(--title); }
.title-links { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.link-btn { border: 0; background: rgba(255, 252, 240, 0.85); border-radius: 999px; padding: 6px 14px; font-size: 15px; box-shadow: 0 2px 8px rgba(70, 90, 70, 0.1); }
.link-btn:hover { background: #fff; }
.result-card.records-card { text-align: left; width: min(520px, 100%); }
.records-card h2 { text-align: center; margin-bottom: 6px; }
.records-card h3 { font-family: var(--title); font-weight: 400; font-size: 17px; margin: 16px 0 8px; color: var(--ink); }
.records-card h3 small { font-family: var(--font); font-size: 13px; color: var(--ink-soft); }
.records-card .stats { margin-bottom: 0; text-align: center; }
.records-card .result-btns { margin-top: 18px; }
.unlocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.unlock { background: #f2f6e8; border-radius: 14px; padding: 8px 10px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.unlock b { font-family: var(--title); font-weight: 400; font-size: 15px; display: block; }
.unlock .ui { font-size: 24px; }
.unlock.locked { filter: grayscale(1); opacity: 0.55; }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ach-list li { display: flex; gap: 10px; align-items: center; background: #f2f6e8; border-radius: 12px; padding: 7px 10px; font-size: 13px; }
.ach-list li .ai { font-size: 22px; width: 28px; text-align: center; }
.ach-list li b { font-family: var(--title); font-weight: 400; font-size: 15px; }
.ach-list li .reward { margin-left: auto; font-size: 12px; color: #b07a2a; white-space: nowrap; }
.ach-list li.locked { opacity: 0.55; }
.ach-list li.locked .ai { filter: grayscale(1); }
.new-ach { background: #fff3cf; border-radius: 14px; padding: 9px 12px; margin: -6px 0 16px; font-size: 14px; line-height: 1.6; }
.new-ach b { font-family: var(--title); font-weight: 400; }
.best-line { display: inline-block; background: rgba(255, 252, 240, 0.7); border-radius: 999px; padding: 3px 14px; margin-top: 0; }
.big-btn {
  border: 0; border-radius: 999px; padding: 15px 34px; font-size: 21px; font-family: var(--title);
  background: linear-gradient(180deg, #84c77c, #5fae63); color: #fff; box-shadow: 0 6px 0 #4c8e4f, 0 14px 26px rgba(70, 120, 60, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.big-btn:hover { transform: translateY(-2px); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #4c8e4f, 0 6px 12px rgba(70, 120, 60, 0.3); }
.best-line { margin-top: 16px; font-size: 15px; text-shadow: 0 0 10px #fff; }
.best-line strong { font-family: var(--title); font-weight: 400; font-size: 19px; color: #c88d2a; }
.howto { list-style: none; padding: 0; margin: 22px auto 0; display: grid; gap: 8px; max-width: 440px; text-align: left; }
.howto li { background: var(--glass); border-radius: 14px; padding: 9px 14px; font-size: 14px; line-height: 1.45; box-shadow: 0 2px 8px rgba(70, 90, 70, 0.08); }
.howto b { display: block; font-family: var(--title); font-weight: 400; font-size: 15px; color: var(--green-dark); }

.result-card {
  background: var(--cream); border-radius: 26px; padding: 26px 24px 22px; width: min(440px, 100%); text-align: center;
  box-shadow: 0 20px 60px rgba(60, 80, 60, 0.25); animation: rise 0.6s ease both; max-height: calc(100% - 20px); overflow: auto;
}
.result-card h2 { margin: 0; font-family: var(--title); font-weight: 400; font-size: 30px; color: var(--green-dark); }
.final-score { margin: 8px 0 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.final-score strong { font-family: var(--title); font-weight: 400; font-size: 54px; line-height: 1; color: #c88d2a; }
.best-small { font-size: 13px; color: var(--ink-soft); }
.best-small:empty { display: none; }
.new-best { background: #fff0c2; border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.stat { background: #f2f6e8; border-radius: 14px; padding: 9px 4px; }
.stat b { display: block; font-family: var(--title); font-weight: 400; font-size: 21px; }
.stat span { font-size: 12px; color: var(--ink-soft); }
.result-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pill-btn {
  border: 0; border-radius: 999px; padding: 11px 20px; font-size: 16px; font-family: var(--title);
  background: #fff; box-shadow: var(--shadow);
}
.pill-btn.primary { background: var(--green); color: #fff; }
.pill-btn:hover { filter: brightness(1.04); }
.menu-card .howto { margin: 14px 0 18px; }

/* 좁은 화면 */
@media (max-width: 560px) {
  .brand { display: none; }
  .topbar { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .back-btn { padding: 8px 11px; font-size: 13px; }
  .score-box { min-width: 66px; padding: 3px 10px 4px; }
  .score-box strong { font-size: 19px; }
  .icon-btn { width: 36px; height: 36px; font-size: 16px; }
  .quests { left: 10px; right: 10px; max-width: none; flex-direction: row; flex-wrap: wrap; gap: 6px; top: calc(58px + env(safe-area-inset-top)); }
  .quest { padding: 5px 9px 5px 6px; font-size: 12px; gap: 5px; border-radius: 12px; }
  .quest .qi { font-size: 16px; width: 20px; }
  .quest .qt { min-width: 64px; }
  .quest .qn b { font-size: 14px; }
  .quest .qlabel { display: none; }
  .toasts { top: calc(110px + env(safe-area-inset-top)); }
  .toast { font-size: 13px; padding: 7px 13px; }
  .stack-card { width: 100px; height: 100px; }
  #cur { width: 94px; height: 94px; }
  .round-btn { width: 48px; height: 48px; font-size: 22px; }
  .tagline { font-size: 15px; }
  .howto li { font-size: 13px; }
  .stats { gap: 6px; }
  .unlocks { grid-template-columns: 1fr; }
  .stat { padding: 7px 2px; }
  .stat b { font-size: 18px; }
  .stat span { font-size: 11px; }
  .final-score strong { font-size: 44px; }
}
@media (max-height: 560px) {
  .howto { display: none; }
}