:root {
  --bg: #efe5d8;
  --ink: #3b2416;
  --soft: #8a6f5c;
  --cream: #fbf7f1;
  --brown: #6b4226;
  --line: #dccfbf;
  --accent: #c8702e;
  --gold: #e5a33a;
  --red: #c4472f;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body {
  font: 15px/1.45 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }

.app { max-width: 480px; margin: 0 auto; padding: 12px 16px 28px; }
.screen { display: flex; flex-direction: column; gap: 12px; }
.sub { font-size: 12px; color: var(--soft); }
.center { text-align: center; }
.stars { color: var(--accent); letter-spacing: 1px; }

/* ---------------------------------------------------------------- 지도 */
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.top h1 { margin: 0; font-size: 22px; letter-spacing: 0.01em; }
.wallet {
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  font-weight: 700; color: var(--accent); white-space: nowrap;
}
.wallet b { color: var(--ink); }
.mapNav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.navBtn {
  border: 1px solid var(--line); background: var(--cream); border-radius: 14px; padding: 8px 6px;
  font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.navBtn .ico { font-size: 18px; line-height: 1; }
.navBtn.locked { opacity: 0.5; }
.mapList { display: flex; flex-direction: column; gap: 12px; }
.chapterCard { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
.chapterCard.locked { opacity: 0.55; }
.chHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chHead b { font-size: 16px; }
.chStars { font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.node {
  aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--line); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; line-height: 1.1;
}
.node .num { font-weight: 800; font-size: 15px; }
.node small { font-size: 9px; color: var(--accent); letter-spacing: 0.5px; min-height: 10px; }
.node.done { background: #fff7ec; border-color: #e9c9a2; }
.node.hard { border-color: #d99a5b; }
.node.boss { border-color: var(--brown); border-width: 3px; }
.node.boss small, .node.hard small { color: var(--brown); font-weight: 700; }
.node.locked { background: #ece3d7; color: #b7a593; }
.node.locked .num { font-size: 12px; }
.node.current { background: var(--brown); border-color: var(--brown); color: #fff; animation: glow 1.6s ease-in-out infinite; }
.node.current small { color: #ffd9b3; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(200, 112, 46, 0.25); } }

/* ---------------------------------------------------------------- 판 */
.gameTop { display: flex; align-items: center; gap: 8px; }
.backBtn { border: 1px solid var(--line); background: var(--cream); border-radius: 999px; padding: 5px 12px; font-weight: 700; white-space: nowrap; }
.levelTitle { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.levelTitle b { font-size: 18px; margin-right: 2px; }
.levelTitle span { font-size: 13px; color: var(--soft); }
.kind { font-size: 11px !important; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: #fff !important; vertical-align: 2px; }
.kind.hard { background: #d99a5b; }
.kind.boss { background: var(--brown); }

.order {
  display: flex; gap: 14px; align-items: center; background: var(--cream); border: 1px solid var(--line);
  border-radius: 18px; padding: 10px 14px; position: relative;
}
.order::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 4px; border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px); opacity: 0.35;
}
#goal {
  width: 96px; height: 96px; border-radius: 50%; flex: none; touch-action: none; cursor: zoom-in;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--line), 0 4px 10px rgba(59, 36, 22, 0.2);
}
.orderHead { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 0.08em; }
.moveInfo { font-size: 16px; font-weight: 700; margin-top: 2px; }
.moveInfo b { color: var(--accent); }

.bar { background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.playRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.playRow label { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.playRow select { font: inherit; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.chip { border: 1px solid var(--line); background: #fff; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.chip.on { background: var(--brown); border-color: var(--brown); color: #fff; }

.stage { position: relative; display: grid; place-items: center; padding: 8px 0 4px; }
.saucer {
  width: min(92vw, 420px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #fdfbf8 0 58%, #f1ebe3 72%, #e6ddd2 100%);
  box-shadow: 0 14px 30px rgba(59, 36, 22, 0.18);
}
.cup {
  position: relative; width: 80%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 12px #fffdfa, 0 0 0 13px #e8dfd4, 0 6px 18px 12px rgba(59, 36, 22, 0.22);
  background: #4a2a17;
}
.cup canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
#overlay { touch-action: none; cursor: crosshair; }
.cup.shake { animation: shake 0.32s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

.toast {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 94%;
  background: rgba(59, 36, 22, 0.92); color: #fff; padding: 7px 14px; border-radius: 16px; font-size: 13px; text-align: center;
  pointer-events: none; word-break: keep-all;
}

.toolBar { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.seg { display: flex; background: #e3d6c5; border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 16px; border-radius: 999px; font-weight: 700; color: var(--soft); }
.seg button.on { background: var(--cream); color: var(--ink); box-shadow: 0 1px 3px rgba(59, 36, 22, 0.15); }
.colors { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.colorsLabel { font-size: 12px; color: var(--soft); }
.swatch {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px 4px 5px;
  font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px;
}
.swatch i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.swatch.on { border-color: var(--brown); box-shadow: 0 0 0 2px var(--brown); }

.controls { display: flex; gap: 8px; justify-content: center; }
.controls button {
  border: 1px solid var(--line); background: var(--cream); padding: 9px 16px; border-radius: 999px; font-weight: 700;
}
.controls button:disabled { opacity: 0.45; }
.hintBtn { background: #fff4e3 !important; border-color: #ecc58e !important; }
.hintBtn small { font-size: 11px; color: var(--accent); }
.pulse { animation: pulse 0.5s ease-in-out 3; }
@keyframes pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(229, 163, 58, 0.35); } }

/* ---------------------------------------------------------------- 서빙 카드 · 창 */
.win {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(40, 24, 14, 0.4), rgba(40, 24, 14, 0) 50%);
}
.card {
  width: min(100%, 420px); background: var(--cream); border-radius: 22px; padding: 16px 18px 14px; text-align: center;
  box-shadow: 0 -6px 30px rgba(40, 24, 14, 0.25); animation: rise 0.35s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes rise { from { transform: translateY(60%); opacity: 0; } }
.served { font-size: 24px; font-weight: 800; letter-spacing: 0.02em; }
.bigStars { font-size: 32px; color: var(--accent); letter-spacing: 4px; margin: 2px 0; animation: pop 0.5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
.winNote { color: var(--soft); font-size: 13px; margin-bottom: 10px; }
.winNote b { color: var(--ink); }
.cardBtns { display: flex; gap: 8px; }
.cardBtns button, .wide { flex: 1; border-radius: 999px; padding: 10px; font-weight: 700; }
.wide { width: 100%; margin-top: 8px; }
.primary { border: 0; background: var(--brown); color: #fff; }
.ghost { border: 1px solid var(--line); background: transparent; }
.danger { color: var(--red); }

.pop {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: rgba(40, 24, 14, 0.45);
}
.popCard {
  width: min(100%, 360px); background: var(--cream); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 10px 40px rgba(40, 24, 14, 0.3); animation: rise 0.25s ease-out;
}
.popCard.big { width: min(100%, 420px); align-items: stretch; }
.popHead { font-size: 17px; font-weight: 800; text-align: center; }
.popItem {
  display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); background: #fff;
  border-radius: 14px; padding: 12px 14px; font-size: 15px;
}
.popItem span { color: var(--accent); font-weight: 800; }
.popItem:disabled { opacity: 0.45; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brown); }
#bigCup { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line); margin: 8px 0 12px; }

/* ---------------------------------------------------------------- 메뉴판 */
.bookTabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.bookTabs button { border: 1px solid var(--line); background: var(--cream); border-radius: 999px; padding: 5px 12px; font-weight: 700; white-space: nowrap; }
.bookTabs button.on { background: var(--brown); border-color: var(--brown); color: #fff; }
.bookGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bookHead { grid-column: 1 / -1; }
.bookItem { border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bookItem .thumb, .bookItem .ph {
  width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line);
}
.bookItem .ph { display: grid; place-items: center; background: #e7dccd; color: #b7a593; font-weight: 800; }
.bookItem small { font-size: 10px; color: var(--soft); }
.empty { grid-column: 1 / -1; text-align: center; color: var(--soft); padding: 24px 0; }

/* ---------------------------------------------------------------- 디버그 */
.debug { background: #fff; border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.debug label { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.debug input[type=range] { flex: 1; }
.debugBtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.debugBtns button { border: 1px solid var(--line); background: var(--cream); border-radius: 8px; padding: 4px 10px; }