/* 색과 글꼴은 「스티커 놀이」와 한 식구. 부엌처럼 따뜻한 크림색 바탕에 토마토색 포인트. */
:root {
  --wall: #FFF1DA;
  --wall-hi: #FFF8EC;
  --paper: #FFFDF6;
  --paper-edge: #EAD9B8;
  --ink: #3B2A20;
  --ink-soft: #7A604C;
  --shadow-ink: #3B2A20;
  --surface: #FFFBEA;
  --surface-edge: #E3D2AE;
  --accent: #F2643D;
  --accent-deep: #B9401F;
  --butter: #FFC93C;
  --mint: #9ED8C6;
  --liner: #FBF7E6; /* 스티커 판의 반들반들한 이형지 */
  --display: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  position: fixed; inset: 0; margin: 0; overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; padding: 0; background: none; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.screen { position: absolute; inset: 0; }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; min-width: 48px; padding: 0 16px; border-radius: 24px;
  background: var(--surface); box-shadow: 0 4px 0 var(--surface-edge);
  font-size: 1.05rem; white-space: nowrap;
}
.chip svg { width: 24px; height: 24px; flex: none; }
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--surface-edge); }
.chip.round { padding: 0; width: 48px; }
.chip.primary { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-deep); }
.chip.primary:active { box-shadow: 0 1px 0 var(--accent-deep); }

/* ───────── 처음 화면: 요리책 ───────── */
#home {
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: max(12px, env(safe-area-inset-top));
  background:
    linear-gradient(90deg, rgba(242, 100, 61, .07) 50%, transparent 50%) 0 0 / 56px 56px,
    linear-gradient(rgba(242, 100, 61, .07) 50%, transparent 50%) 0 0 / 56px 56px,
    var(--wall);
}
#home > * { flex-shrink: 0; } /* 카드가 많아 스크롤될 때 제목·손님 줄이 찌그러지지 않게 */
.home-bar { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px; position: relative; }
select.chip { -webkit-appearance: none; appearance: none; border: 0; font: inherit; color: inherit; text-align: center; text-align-last: center; cursor: pointer; }
.cover { position: relative; text-align: center; padding: 0 16px; }
.cover .hat { width: clamp(56px, 11vw, 84px); height: auto; display: block; margin: -6px auto -4px; filter: drop-shadow(0 3px 0 rgba(59, 42, 32, .12)); }
.cover h1 { margin: 0; font-weight: 400; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.15; }
.cover p { margin: 6px 0 0; color: var(--ink-soft); font-size: clamp(1rem, 3vw, 1.2rem); word-break: keep-all; }
.parade {
  display: flex; justify-content: center; align-items: flex-end; gap: 1%;
  height: clamp(70px, 13vh, 120px); margin: 12px 16px -22px; position: relative; z-index: 1;
}
.parade span { height: 100%; max-width: 15%; display: block; transform-origin: 50% 100%; cursor: pointer; }
.parade span:nth-child(even) { height: 88%; }
.parade svg { height: 100%; width: auto; max-width: 100%; display: block; }
.parade .hop { animation: celebrate .9s ease-in-out; }
.book {
  flex: 1 0 auto; position: relative;
  margin: 0 max(10px, calc((100% - 1040px) / 2));
  padding: 34px 18px max(28px, env(safe-area-inset-bottom));
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -2px 0 var(--paper-edge), 0 0 0 1px rgba(59, 42, 32, .05);
}
/* 책갈피 리본 */
.book::before {
  content: ""; position: absolute; top: -10px; right: 36px; width: 30px; height: 64px;
  background: var(--accent); border-radius: 4px 4px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
@media (max-width: 640px) { .book::before { display: none; } }
.modes { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.mode {
  height: 52px; padding: 0 22px; border-radius: 26px; font-size: 1.2rem;
  background: var(--wall); box-shadow: 0 4px 0 var(--paper-edge);
}
.mode.on { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-deep); }
.mode:active { transform: translateY(3px); }
.mode-hint { margin: 4px 0 14px; text-align: center; color: var(--ink-soft); font-size: 1rem; word-break: keep-all; }
.chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.chapter {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px;
  background: transparent; box-shadow: inset 0 0 0 2.5px var(--paper-edge); font-size: 1.1rem;
}
.chapter span { font-size: .85rem; color: var(--ink-soft); }
.chapter.on { background: var(--butter); box-shadow: 0 3px 0 #D9A21E; }
.chapter.on span { color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 10px 12px;
  border-radius: 22px; background: #fff; box-shadow: 0 5px 0 var(--paper-edge), 0 0 0 1px rgba(59, 42, 32, .06);
  font-size: 1.2rem; text-align: center;
}
.card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--paper-edge); }
/* 요리 사진: 둥근 접시 위에 */
.card .photo {
  display: block; position: relative; aspect-ratio: 5 / 4; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: radial-gradient(closest-side, #fff 70%, #F1ECE2 73%, #fff 84%, #F6F1E7 100%);
}
.card.todo .photo .dish-fit { filter: grayscale(1) contrast(.75) brightness(1.12); opacity: .55; }
.card .label { display: block; line-height: 1.2; }
.card .meta { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: .9rem; color: var(--ink-soft); }
.card .meta .who { width: 30px; height: 30px; display: inline-block; }
.card .meta svg { width: 100%; height: 100%; }
.card .badge { font-size: .85rem; color: var(--accent-deep); background: #FFE9A8; border-radius: 999px; padding: 2px 10px; }
.recipe-card .badge { position: absolute; top: 10px; left: 10px; }
/* 다 만든 요리의 도장 */
.seal {
  position: absolute; top: 6px; right: 6px; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  color: #D8342B; border: 4px solid #D8342B; background: rgba(255, 255, 255, .85);
  transform: rotate(-14deg); font-size: .95rem; line-height: 1;
}
.seal b { font-weight: 400; font-size: .8rem; }
.table-card .preview { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; pointer-events: none; --u: .2px; }
.table-card .preview .bg { position: absolute; inset: 0; }
.table-card .preview .bg svg { width: 100%; height: 100%; display: block; }
.table-card .label { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dish-fit { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.dish-fit .marks, .table-card .marks { position: absolute; left: 0; top: 0; width: calc(1600 * var(--u)); height: calc(1000 * var(--u)); overflow: visible; }
.table-card .marks { z-index: 5000; }

/* ───────── 요리판 ───────── */
#game { touch-action: none; }
.stage {
  position: absolute;
  inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 8px;
}
.stage.side { flex-direction: row; }
.board-wrap { flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; position: relative; z-index: 2; pointer-events: none; }
.board { position: relative; --u: .5px; flex: none; pointer-events: auto; }
.board .bg { position: absolute; inset: 0; border-radius: calc(var(--u) * 44); overflow: hidden; box-shadow: 0 5px 0 rgba(59, 42, 32, .16); }
.board .bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .13) 42%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, 0) 80%);
}
.bg svg { display: block; width: 100%; height: 100%; }
.layer { position: absolute; inset: 0; pointer-events: none; }
/* 층: 배경 < 손님 < 붙일 자리 < 재료 < 효과 < 단계표·말풍선 */
#guest { z-index: 1; }
#slots { z-index: 2; }
#stickers { z-index: 3; }
#fx { z-index: 4; }
#ui { z-index: 5; }

/* 장면 좌표(1600×1000)를 화면으로 옮긴다. --u 는 장면 1칸의 크기(px). */
.slot, .sticker, .sticker-shade, .fx-item {
  position: absolute; left: 0; top: 0;
  transform: translate(calc(var(--x) * var(--u) - 50%), calc(var(--y) * var(--u) - 50%));
}
.slot, .sticker, .sticker-shade { width: calc(var(--w) * var(--u)); aspect-ratio: var(--ar); }
.slot svg, .sticker svg, .sticker-shade svg { display: block; width: 100%; height: 100%; overflow: visible; }
.slot-flip, .sticker-flip { width: 100%; height: 100%; transform: rotate(calc(var(--rot, 0) * 1deg)); }
.flip > .slot-flip, .flip > .sticker-inner > .sticker-flip { transform: rotate(calc(var(--rot, 0) * 1deg)) scaleX(-1); }

/* 붙일 자리: 옅은 흰 테 + 반투명 그림자 */
.slot { transition: opacity .25s; }
.slot-halo, .slot-fill { position: absolute; inset: 0; display: block; transition: opacity .25s; }
.slot-halo { color: #fff; opacity: .5; }
.slot-fill { color: var(--shadow-ink); opacity: .26; }
.slot.filled { opacity: 0; }
.slot.hint .slot-fill { opacity: .45; }
.slot.hint .slot-halo { opacity: .85; }
.slot.hint svg { animation: hint .8s ease-in-out infinite; }
.slot.appear .slot-flip { animation: slot-in .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: inherit; }
.dark .slot-fill { color: #FFF8EC; opacity: .36; }

/* 재료 스티커 */
.sticker { pointer-events: none; will-change: transform; }
.sticker.leaving { transition: transform .24s ease-in, opacity .24s ease-in; opacity: 0; }
.sticker.leaving .sticker-inner { transform: scale(.25) rotate(-30deg); transition: transform .24s ease-in; }
.sticker.squash .sticker-inner { animation: squash .4s ease-in forwards; }
.sticker-inner { width: 100%; height: 100%; transform-origin: 50% 70%; }
.sticker .front { pointer-events: visiblePainted; cursor: grab; }
.sticker.lifted .front { cursor: grabbing; }
.sticker-shade { pointer-events: none; color: var(--shadow-ink); opacity: 0; filter: blur(calc(var(--u) * 12)); will-change: transform, opacity; }
/* 구운 재료는 노릇노릇 */
.sticker.cooked .sticker-flip { filter: sepia(.42) saturate(1.5) brightness(.94) contrast(1.06); }
.sticker.boiled .sticker-flip { filter: saturate(1.15) brightness(1.02); }

.sticker-inner.stick { animation: stick .3s ease-out; }
.sticker-inner.celebrate { animation: celebrate 1s ease-in-out; }
.sticker-inner.shout { animation: shout .6s ease-in-out; }
.sticker-inner.dance { animation: dance .6s ease-in-out 3; }
.sticker-inner.pop-in { animation: pop-in .55s cubic-bezier(.3, 1.6, .5, 1) both; }

/* 뿌린 가루·짜서 그린 소스 */
.marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* 요리 중 */
.board.simmer #stickers .sticker-inner { animation: simmer .35s ease-in-out infinite alternate; }
#stickers.jiggle .sticker-inner { animation: simmer .18s ease-in-out infinite alternate; }
.board.heat .bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 46% 58%, rgba(255, 150, 60, .5), rgba(255, 110, 40, .18) 55%, rgba(255, 90, 30, .1));
  animation: heat 1s ease-in-out infinite alternate;
}
.board.heat #stickers .sticker-flip { filter: saturate(1.2) brightness(1.05); }
#stickers { transition: opacity .5s; }
#stickers.eaten { opacity: 0; }

/* 스티커 그림 */
.stk .die-c { color: #fff; }
.stk .mouth-open { display: none; }
.stk.roaring .mouth-open { display: inline; }
.stk.roaring .mouth-closed { display: none; }
.board .guest .eye, .parade .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.2s infinite; }
.parade span:nth-child(2n) .eye { animation-delay: -1.3s; }
.parade span:nth-child(3n) .eye { animation-delay: -2.6s; }

/* 손님 */
.guest { pointer-events: none; }
.guest .front { pointer-events: visiblePainted; cursor: pointer; }
.guest .sticker-inner { transform-origin: 50% 95%; }
.guest .sticker-inner.hop { animation: celebrate .9s ease-in-out; }
.guest .sticker-inner.lean { animation: lean .5s ease-in-out; }
.guest .sticker-inner.chew { animation: chew .6s ease-in-out; }
.guest.spicy .sticker-flip { filter: saturate(1.8) hue-rotate(-12deg) brightness(1.02); }
.guest.spicy .sticker-inner { animation: shake .12s linear 10; }

/* 스티커 판 */
.tray {
  flex: none; position: relative; z-index: 1;
  display: flex; align-items: stretch; gap: 4px; padding: 6px;
  border-radius: 20px; box-shadow: 0 5px 0 var(--surface-edge), inset 0 0 0 2px rgba(255, 255, 255, .7);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .85) 27%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .6) 66%, rgba(255, 255, 255, 0) 74%),
    var(--liner);
  transition: box-shadow .15s;
}
.tray-grid { flex: 1; min-width: 0; min-height: 0; display: grid; }
.tray-grid.turn { animation: turn .3s ease-out; }
.pager { display: none; flex: none; width: 48px; place-items: center; border-radius: 16px; background: var(--surface); box-shadow: 0 3px 0 var(--surface-edge); }
.tray.paged .pager { display: grid; }
.pager svg { width: 28px; height: 28px; }
.pager:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--surface-edge); }
.tray.stack { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.tray.stack .tray-grid { grid-column: 1 / 3; grid-row: 1; }
.tray.stack .pager { width: auto; height: 48px; grid-row: 2; }
.tray.dropzone { box-shadow: 0 5px 0 var(--surface-edge), inset 0 0 0 4px var(--butter); }
.cell { position: relative; min-width: 0; min-height: 0; touch-action: none; cursor: grab; }
.cell-hole, .cell-art { position: absolute; inset: 4px; }
.cell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cell-hole { opacity: 0; transition: opacity .15s; }
.cell.out .cell-hole { opacity: 1; }
.cell.out .cell-art { visibility: hidden; }
.cell.out .badge { display: none; }
.stk-hole .hole-edge { color: rgba(59, 42, 32, .2); }
.stk-hole .hole-fill { color: #FFFEF8; }
.cell-art { transform-origin: 50% 90%; }
.cell-art.refill { animation: refill .3s cubic-bezier(.3, 1.6, .5, 1); }
.cell-art.shout { animation: shout .6s ease-in-out; }
.cell .badge {
  position: absolute; right: 2px; bottom: 2px; min-width: 30px; padding: 0 7px; height: 26px; line-height: 26px; border-radius: 13px;
  background: var(--accent); color: #fff; font-size: .95rem; text-align: center; pointer-events: none;
}
.cell .badge:empty { display: none; }

/* 도구 판 (요리 단계에서 스티커 판 자리에) */
.panel { display: none; }
.tray.tool-mode > :not(.panel) { display: none !important; }
.tray.tool-mode .panel { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; min-height: 0; padding: 4px 8px; }
.stage.side .tray.tool-mode .panel { flex-direction: column; }
.tool {
  position: relative; flex: none; width: min(104px, 22vmin); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: 0 5px 0 var(--surface-edge);
  touch-action: none;
}
.tool .tool-icon { width: 64%; height: 64%; display: block; }
.tool .tool-icon svg { width: 100%; height: 100%; display: block; }
.tool.press { animation: breathe 1.4s ease-in-out infinite; }
.tool.down { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 var(--surface-edge); animation: none; }
.tool.feed { background: var(--accent); box-shadow: 0 5px 0 var(--accent-deep); animation: breathe 1.4s ease-in-out infinite; }
.ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke-width: 7; }
.ring-bg { stroke: rgba(59, 42, 32, .08); }
.ring-fg { stroke: var(--butter); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .12s; }
.panel-hint { margin: 0; display: flex; align-items: center; gap: 8px; font-size: clamp(1.05rem, 3.2vmin, 1.4rem); color: var(--ink-soft); word-break: keep-all; text-align: center; }
.stage.side .panel-hint { flex-direction: column; }
.hint-hand { width: 38px; height: 44px; flex: none; display: block; }
.hint-hand svg { width: 100%; height: 100%; display: block; }
.hint-hand.hold, .hint-hand.tap { animation: press 1s ease-in-out infinite; }
.hint-hand.rub, .hint-hand.draw { animation: rub 1.2s linear infinite; }
.hint-hand.swipe { animation: swipe 1.1s ease-in-out infinite; }

/* 그림판 위의 손가락 힌트 · 도구 커서 */
.board-hand { display: block; width: calc(var(--u) * 110); height: calc(var(--u) * 128); filter: drop-shadow(0 calc(var(--u) * 6) 0 rgba(59, 42, 32, .25)); }
.board-hand svg { width: 100%; height: 100%; display: block; }
.board-hand.tap, .board-hand.hold { animation: press 1s ease-in-out infinite; }
.board-hand.rub, .board-hand.draw { animation: rub-big 1.4s linear infinite; }
.board-hand.swipe { animation: swipe-big 1.2s ease-in-out infinite; }
.cursor { display: block; width: calc(var(--u) * 150); height: calc(var(--u) * 150); transform: translate(20%, -60%) rotate(-12deg); filter: drop-shadow(0 calc(var(--u) * 8) 0 rgba(59, 42, 32, .2)); }
.cursor svg { width: 100%; height: 100%; display: block; }
.cursor.sprinkle { transform: translate(0, -95%) rotate(160deg); animation: shaker .16s ease-in-out infinite alternate; }
.cursor.squeeze { transform: translate(-6%, -98%) rotate(180deg); }
.cursor.mix { transform: translate(-40%, -70%); }
.cursor.roll { transform: translate(-50%, -30%); width: calc(var(--u) * 190); }
.knife { display: block; width: calc(var(--u) * 170); height: calc(var(--u) * 170); }
.knife svg { width: 100%; height: 100%; display: block; }
.cuts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cuts line { stroke: #fff; stroke-width: 9; stroke-dasharray: 14 16; stroke-linecap: round; animation: dash .8s linear infinite; filter: drop-shadow(0 0 3px rgba(59, 42, 32, .5)); }
.cuts line.cut { animation: none; opacity: 0; transition: opacity .3s; }
.tap-ring { width: calc(var(--u) * 110); height: calc(var(--u) * 110); border-radius: 50%; border: calc(var(--u) * 8) dashed #fff; animation: spin 3s linear infinite, breathe 1s ease-in-out infinite; }
.flame {
  display: block; width: calc(var(--u) * 34); height: calc(var(--u) * 54);
  background: radial-gradient(ellipse at 50% 70%, #FFF6B0 20%, #FFC93C 45%, #FF8A3D 75%, rgba(255, 110, 40, 0) 76%);
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  transform-origin: 50% 100%; animation: flicker .18s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 calc(var(--u) * 14) rgba(255, 190, 60, .9));
}
.flame.windy { animation: windy .1s ease-in-out infinite alternate; }

/* 단계표: 그림으로 된 레시피 */
.fx-item.strip { transform: translate(calc(var(--x) * var(--u) - 50%), calc(var(--y) * var(--u))); z-index: 2; }
.strip-box { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.dots {
  display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 10) calc(var(--u) * 18);
  background: rgba(255, 253, 246, .92); border-radius: calc(var(--u) * 70); box-shadow: 0 calc(var(--u) * 6) 0 rgba(59, 42, 32, .12);
}
.dot {
  position: relative; width: calc(var(--u) * 84); height: calc(var(--u) * 84); border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 5) var(--paper-edge); pointer-events: auto;
  transition: transform .25s;
}
.dot-icon { position: absolute; inset: 14%; display: block; }
.dot-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dot-num {
  position: absolute; right: -8%; bottom: -8%; min-width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%;
  background: var(--paper-edge); color: var(--ink); font-size: calc(var(--u) * 22); line-height: calc(var(--u) * 34); text-align: center;
}
.dot.past { opacity: .6; }
.dot.past .dot-num { background: #4FA35B; color: #fff; }
.dot.now { transform: scale(1.3); box-shadow: inset 0 0 0 calc(var(--u) * 6) var(--butter), 0 calc(var(--u) * 6) 0 rgba(59, 42, 32, .15); z-index: 1; }
.dot.now .dot-num { background: var(--accent); color: #fff; }
.caption {
  margin: calc(var(--u) * 4) 0 0; padding: calc(var(--u) * 8) calc(var(--u) * 26); border-radius: 999px; white-space: nowrap;
  background: var(--accent); color: #fff; font-size: calc(var(--u) * 40); box-shadow: 0 calc(var(--u) * 6) 0 var(--accent-deep);
}
.caption:empty { display: none; }

/* 손님 말풍선 */
.fx-item.fx-bubble { transform: translate(calc(var(--x) * var(--u) - 70%), calc(var(--y) * var(--u) - 100%)); z-index: 3; }
.bubble {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 18) calc(var(--u) * 30); border-radius: calc(var(--u) * 40);
  background: #fff; box-shadow: 0 calc(var(--u) * 8) 0 rgba(59, 42, 32, .15);
  font-size: calc(var(--u) * 46); white-space: nowrap; animation: pop-in .4s cubic-bezier(.3, 1.6, .5, 1) both;
  transform-origin: 70% 100%;
}
.bubble::after {
  content: ""; position: absolute; right: 22%; bottom: calc(var(--u) * -26); width: calc(var(--u) * 44); height: calc(var(--u) * 44);
  background: #fff; clip-path: polygon(0 0, 100% 0, 80% 100%);
}
.order-pic { position: relative; }

/* 다 먹었을 때의 도장 */
.stamp {
  position: absolute; z-index: 6; left: 50%; top: 50%; width: calc(var(--u) * 380); height: calc(var(--u) * 380);
  margin: calc(var(--u) * -190) 0 0 calc(var(--u) * -310);
  display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  border: calc(var(--u) * 18) solid #D8342B; color: #D8342B; background: rgba(255, 255, 255, .72);
  font-size: calc(var(--u) * 64); text-align: center; line-height: 1.1; transform: rotate(-14deg);
}
.stamp span { width: 70%; word-break: keep-all; }
.stamp.stamp-in { animation: stamp-in .45s cubic-bezier(.3, 1.4, .5, 1) both; }

/* 버튼·알림 */
.game-bar { position: absolute; z-index: 6; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: flex; gap: 8px; }
.game-bar .chip { opacity: .94; }
.free-bar { display: none; position: absolute; z-index: 6; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); gap: 8px; }
#game.free .free-bar { display: flex; }
.tool-chip svg { width: 32px; height: 32px; }
.tool-chip.on { box-shadow: 0 4px 0 var(--surface-edge), inset 0 0 0 3px var(--accent); }
.serve-chip svg { width: 28px; height: 28px; }
@media (max-width: 640px) { .serve-chip span { display: none; } .serve-chip { padding: 0; width: 48px; } .free-bar { gap: 6px; } }
#done {
  position: absolute; z-index: 7; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 20px 16px;
  background: var(--surface); border-radius: 26px; box-shadow: 0 6px 0 var(--surface-edge);
  animation: drop-in .5s cubic-bezier(.3, 1.5, .5, 1);
}
#done strong { font-weight: 400; font-size: clamp(1.4rem, 4.5vw, 2rem); }
#done div { display: flex; gap: 10px; }

/* 효과 */
.fx-item { pointer-events: none; z-index: 1; }
.name-tag {
  padding: calc(var(--u) * 14) calc(var(--u) * 40); border-radius: 999px;
  background: var(--surface); box-shadow: 0 calc(var(--u) * 8) 0 var(--surface-edge);
  font-size: calc(var(--u) * 70); white-space: nowrap;
  animation: name-pop 2s ease-in-out both;
}
.cry {
  font-size: calc(var(--u) * 62); white-space: nowrap; color: var(--c, var(--accent));
  -webkit-text-stroke: calc(var(--u) * 14) #fff; paint-order: stroke fill;
  animation: cry-float 1.4s ease-out both;
}
.bit { display: block; }
.bit svg { display: block; width: 100%; height: 100%; }

@keyframes hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes slot-in { 0% { scale: .4; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
@keyframes stick { 0% { transform: scale(1.05); } 40% { transform: scale(.95, .97); } 70% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes turn { 0% { opacity: .2; transform: translateY(12%) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes refill { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pop-in { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes squash { 0% { transform: none; opacity: 1; } 100% { transform: scale(.6, .3); opacity: 0; } }
@keyframes celebrate {
  0% { transform: none; }
  12% { transform: scale(1.12, .88); }
  30% { transform: translateY(-18%) scale(.94, 1.08) rotate(-5deg); }
  46% { transform: scale(1.06, .94) rotate(4deg); }
  60% { transform: translateY(-7%) rotate(-3deg); }
  76% { transform: scale(1.03, .97) rotate(2deg); }
  100% { transform: none; }
}
@keyframes shout {
  0%, 100% { transform: none; }
  15% { transform: scale(1.1) rotate(-5deg); }
  35% { transform: scale(1.1) rotate(5deg); }
  55% { transform: scale(1.08) rotate(-4deg); }
  75% { transform: scale(1.04) rotate(3deg); }
}
@keyframes dance {
  0%, 100% { transform: none; }
  25% { transform: translateY(-10%) rotate(-7deg); }
  50% { transform: scale(1.06, .94); }
  75% { transform: translateY(-6%) rotate(7deg); }
}
/* 손님은 좌우로 뒤집혀 있어서, 요리(왼쪽) 쪽으로 기울면 오른쪽으로 움직이는 셈이다 */
@keyframes lean { 0%, 100% { transform: none; } 45% { transform: translateX(16%) rotate(10deg) scale(1.06); } }
@keyframes chew { 0%, 100% { transform: none; } 20%, 60% { transform: scale(1.05, .95); } 40%, 80% { transform: scale(.97, 1.03); } }
@keyframes shake { 0% { transform: translateX(-2%); } 50% { transform: translateX(2%); } 100% { transform: translateX(-2%); } }
@keyframes simmer { 0% { transform: translateY(0) rotate(-.6deg); } 100% { transform: translateY(-1.2%) rotate(.6deg); } }
@keyframes heat { 0% { opacity: .55; } 100% { opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes press { 0%, 100% { transform: translate(0, 0) scale(1); } 45%, 60% { transform: translate(0, 10%) scale(.9); } }
@keyframes rub { 0% { transform: translate(0, 0); } 25% { transform: translate(18%, -12%); } 50% { transform: translate(0, -20%); } 75% { transform: translate(-18%, -12%); } 100% { transform: translate(0, 0); } }
@keyframes rub-big { 0% { transform: translate(0, 0); } 25% { transform: translate(90%, -50%); } 50% { transform: translate(0, -90%); } 75% { transform: translate(-90%, -50%); } 100% { transform: translate(0, 0); } }
@keyframes swipe { 0% { transform: translateY(30%); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(-40%); opacity: 1; } 100% { transform: translateY(-50%); opacity: 0; } }
@keyframes swipe-big { 0% { transform: translateY(80%); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(-150%); opacity: 1; } 100% { transform: translateY(-170%); opacity: 0; } }
@keyframes shaker { 0% { rotate: -8deg; } 100% { rotate: 8deg; } }
@keyframes dash { to { stroke-dashoffset: -30; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-3deg); } 100% { transform: scale(.92, 1.08) rotate(3deg); } }
@keyframes windy { 0% { transform: skewX(-30deg) scale(.8, .7); } 100% { transform: skewX(-12deg) scale(.9, .85); } }
@keyframes stamp-in { 0% { transform: rotate(-30deg) scale(2.4); opacity: 0; } 60% { transform: rotate(-12deg) scale(.92); opacity: 1; } 100% { transform: rotate(-14deg) scale(1); } }
@keyframes name-pop {
  0% { transform: scale(.3); opacity: 0; }
  10% { transform: scale(1.12); opacity: 1; }
  16%, 84% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.8); opacity: 0; }
}
@keyframes cry-float {
  0% { transform: scale(.2); opacity: 0; }
  18% { transform: scale(1.2); opacity: 1; }
  30% { transform: scale(1); }
  75% { opacity: 1; }
  100% { transform: translateY(-60%); opacity: 0; }
}
@keyframes drop-in { 0% { transform: translate(-50%, -140%); } 100% { transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
  .board .guest .eye, .parade .eye, .slot.hint svg, .tool.press, .tool.feed { animation: none; }
}