/* 냥냥 스시 가게 — 밝고 캐주얼한 파스텔 목재(#66, #67) */
:root {
  --cream: #FFF6E8; --wood: #C98B5A; --brown: #5B3827; --salmon: #FF8F82; --mint: #A7DFC4;
  --sky: #9ADAF1; --yellow: #FFD060; --danger: #EF6C64; --wood-d: #A86D40; --panel: #FFFAF0; --line: #E8D5B8;
  --font: 'Jua', 'Apple SD Gothic Neo', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #3d2a20; font-family: var(--font); color: var(--brown); overscroll-behavior: none; }
body { display: flex; justify-content: center; align-items: center; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
svg, img.art { display: block; width: 100%; height: 100%; overflow: visible; }
img.art { object-fit: contain; pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
img.art.off { filter: grayscale(1) brightness(1.15) opacity(.5); }
[hidden] { display: none !important; }

#app { position: relative; width: 100%; max-width: 430px; height: 100dvh; max-height: 932px; overflow: hidden;
  background: #E2B079 url(assets/bg/wood.webp?v=3) center / cover; }
@media (min-width: 500px) { #app { border-radius: 28px; box-shadow: 0 20px 60px #0008, 0 0 0 8px #2a1c15; height: min(100dvh - 32px, 932px); } }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); }

/* ── 공통 ── */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--brown); color: var(--cream); font-size: 16px; white-space: nowrap; }
.pill img { width: 20px; height: 20px; }
.btn-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--panel); border: 2.5px solid var(--brown); font-size: 18px; box-shadow: 0 3px 0 var(--wood-d); flex: none; }
.btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 8px 16px; border-radius: 18px;
  background: var(--panel); border: 3px solid var(--brown); box-shadow: 0 5px 0 var(--wood-d); font-size: 20px; transition: transform .08s; }
.btn small { font-size: 13px; opacity: .85; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--wood-d); }
.btn.primary { background: var(--salmon); color: #fff; text-shadow: 0 2px 0 #c95c50; box-shadow: 0 5px 0 #c95c50; }
.btn.green { background: #6CCB8F; color: #fff; text-shadow: 0 2px 0 #3f9c63; box-shadow: 0 5px 0 #3f9c63; flex-direction: row; gap: 6px; }
.btn.green img { width: 22px; height: 22px; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; font-size: 16px; min-height: 40px; }
.btn.small { font-size: 13px; min-height: 30px; opacity: .7; }
.btn:disabled { filter: grayscale(.8); opacity: .6; }
.coins { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 6px; border-radius: 16px; background: var(--panel); border: 2.5px solid var(--brown); font-size: 16px; }
.coins img { width: 22px; height: 22px; }
.hard { color: var(--danger); font-size: .7em; margin-left: 2px; }
.food { display: block; }

/* ── 로비 ── */
.lobby { padding: 0; }
.lobby-art { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 2 / 3; background: url(assets/bg/lobby.webp?v=3) top / 100% auto no-repeat; }
.lobby-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 12%; background: linear-gradient(#0000, #d9a468); }
/* 손 흔드는 셰프: 세 프레임을 겹쳐 두고 번갈아 보인다. 레일보다 뒤에 서도록 배경 아랫부분을 한 번 더 덮는다. */
.lobby .chef { position: absolute; left: 21%; top: 28.6%; width: 55%; aspect-ratio: 1.1; animation: bob 2.6s ease-in-out infinite; }
.lobby .chef img { position: absolute; inset: 0; opacity: 0; object-position: right bottom; }
.lobby .chef .f1 { animation: chefA 3.6s steps(1) infinite; } .lobby .chef .f2 { animation: chefB 3.6s steps(1) infinite; } .lobby .chef .f3 { animation: chefC 3.6s steps(1) infinite; }
@keyframes chefA { 0%, 10%, 30%, 50%, 70% { opacity: 1; } 20%, 40%, 60%, 80%, 100% { opacity: 0; } }
@keyframes chefB { 0%, 10%, 30%, 50%, 80% { opacity: 0; } 20%, 40%, 60% { opacity: 1; } 70% { opacity: 0; } }
@keyframes chefC { 0% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; } }
.lobby-front { position: absolute; inset: 0; background: url(assets/bg/lobby.webp?v=3) top / 100% auto no-repeat; clip-path: polygon(0 52.6%, 30% 55.6%, 70% 55.6%, 100% 52.6%, 100% 100%, 0 100%); }
.lobby .title { position: absolute; left: 15%; top: 12.6%; width: 70%; height: 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-1deg); }
.lobby .title h1 { margin: 0; font-size: min(9.6vw, 41px); line-height: 1.04; white-space: nowrap; font-weight: 400; text-align: center; color: var(--cream); -webkit-text-stroke: 6px var(--brown); paint-order: stroke fill; text-shadow: 0 3px 0 var(--brown); }
.lobby .title p { margin: 5px 0 0; font-size: min(2.7vw, 11.5px); color: #fff3df; white-space: nowrap; text-shadow: 0 1px 0 var(--brown); }
.lobby .coins { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; }
.menu { position: absolute; left: 11%; right: 11%; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 11px; }
.sound-hint { margin: 0; font-size: 13px; text-align: center; color: var(--brown); opacity: .8; }
@keyframes bob { 50% { transform: translateY(-5px); } }

/* ── 상단 줄(선택/가게) ── */
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.top h2 { flex: 1; margin: 0; text-align: center; font-size: 24px; font-weight: 400; color: var(--cream); -webkit-text-stroke: 5px var(--brown); paint-order: stroke fill; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cell { position: relative; aspect-ratio: .82; border-radius: 14px; background: var(--panel); border: 3px solid var(--brown); box-shadow: 0 4px 0 var(--wood-d); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4px 2px 5px; }
.cell b { font-size: 26px; font-weight: 400; line-height: 1; }
.cell small { font-size: 9.5px; opacity: .75; white-space: nowrap; overflow: hidden; max-width: 100%; }
.cell .stars { position: absolute; top: -9px; left: 0; right: 0; display: flex; justify-content: center; }
.cell .stars img { width: 19px; height: 19px; margin: 0 -1.5px; }
.cell.locked { background: #b9a995; border-color: #8d7b66; box-shadow: 0 4px 0 #7a6a58; }
.cell.locked > img { width: 30px; height: 30px; margin-bottom: 2px; }
.cell.hard { background: #FFE0DC; }
.cell.soon { opacity: .6; }
.note { font-size: 12.5px; text-align: center; opacity: .75; margin-top: 16px; }

/* ── 내 초밥집 ── */
.shop-view { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 200px; }
.shop-pic { position: relative; width: 86%; max-width: 330px; aspect-ratio: 1; flex: 0 1 auto; min-height: 0; animation: bob 4s ease-in-out infinite; }
.shop-pic span { position: absolute; left: 30%; width: 40%; top: 36.5%; text-align: center; font-size: min(4.6vw, 19px); color: var(--brown); }
.shop-view .staff { display: flex; gap: 4px; margin: -18px 0 10px; height: 50px; position: relative; }
.shop-view .staff i { width: 60px; }
.panel { background: var(--panel); border: 3px solid var(--brown); border-radius: 20px; padding: 14px 16px; text-align: center; box-shadow: 0 5px 0 var(--wood-d); }
.panel h3, .panel h4 { margin: 0; font-weight: 400; } .panel h3 { font-size: 22px; } .panel h4 { font-size: 19px; }
.panel p { margin: 4px 0 8px; font-size: 14px; }
.panel ul { list-style: none; margin: 0 0 10px; padding: 8px; background: #FBEED6; border-radius: 12px; font-size: 14px; }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; text-align: left; }
.buy .btn { width: auto; min-height: 44px; font-size: 16px; white-space: nowrap; }

/* ── 게임 ── */
.play { padding-inline: 8px; background: url(assets/bg/game-top.webp?v=3) top / 100% auto no-repeat; }
#game-root, .game { height: 100%; }
.game { position: relative; display: flex; flex-direction: column; gap: 6px; touch-action: none; }
.hud { display: flex; align-items: center; gap: 8px; }
.orders-pill { flex: 1; justify-content: center; } .orders-pill span { font-size: 13px; opacity: .8; }
.orders-pill .bar { width: 64px; height: 8px; border-radius: 4px; background: #3d2518; overflow: hidden; }
.orders-pill .bar em { display: block; height: 100%; background: var(--yellow); border-radius: 4px; transition: width .3s; }
.hud2 { display: flex; justify-content: center; gap: 8px; min-height: 28px; }
.hud2 .pill { height: 28px; font-size: 14px; background: #5b3827cc; }
.lost-pill b { color: var(--yellow); margin-left: 2px; } .lost-pill.danger { background: var(--danger); }
.timer-pill.danger { background: var(--danger); animation: pulse .7s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }

.next { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 16px; background: #fff8ecd9; border: 2.5px solid var(--line); }
.next .lbl, .queue .lbl { font-size: 12px; padding: 3px 7px; border-radius: 8px; background: var(--brown); color: var(--cream); flex: none; }
.next .chip { width: calc(46px - var(--k, 1) * 3px); height: calc(46px - var(--k, 1) * 3px); flex: none; opacity: calc(1.05 - var(--k, 1) * .09); }
.next .chip.none { width: 30px; }
.next .chip.f-pudding { width: 58px; }

.belt { position: relative; height: clamp(96px, 17dvh, 150px); flex: none; margin-inline: -8px; }
.belt-track { position: absolute; inset: 14px 0; background: repeating-linear-gradient(90deg, #6b5a52 0 26px, #5f4f48 26px 30px); border-block: 6px solid #4a3d37; animation: belt 1.6s linear infinite; }
@keyframes belt { to { background-position: -30px 0; } }
.belt-items { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; }
.belt .side { position: absolute; display: block; width: 74px; height: 74px; opacity: .55; }
.belt .side span { position: absolute; inset: 4px 14px 22px; }
.belt .side.f-pudding span { inset: 8px 4px 20px; }
.cur { position: relative; width: clamp(104px, 15dvh, 132px); height: clamp(104px, 15dvh, 132px); cursor: grab; filter: drop-shadow(0 0 10px #FFE58A) drop-shadow(0 0 3px #FFD060); animation: curIn .22s ease-out; }
.cur .food { position: absolute; inset: 6px 24px 36px; transform: scale(1.2); }
.cur .food.big { inset: 14px 8px 34px; }
.cur.dragging { opacity: .35; }
.cur.none { display: grid; place-items: center; filter: none; font-size: 20px; color: var(--cream); }
.cur.hot { filter: drop-shadow(0 0 10px #ff9c7a) drop-shadow(0 0 3px var(--danger)); }
.cur.spoiled .food, .slot.spoiled .food { filter: grayscale(1) brightness(.62) sepia(.5) hue-rotate(50deg); }
@keyframes curIn { from { transform: translateX(46px) scale(.8); opacity: .3; } }
.fresh { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--danger) calc(var(--p, 1) * 360deg), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px)); }
.fresh-t { position: absolute; top: -2px; right: -2px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 13px; background: var(--danger); color: #fff; font-size: 15px; display: grid; place-items: center; font-weight: 400; border: 2px solid #fff; }
.steam { animation: steam 1.4s ease-in-out infinite; } @keyframes steam { 50% { opacity: .3; transform: translateY(-2px); } }

.bubble { align-self: center; max-width: 92%; padding: 7px 16px; border-radius: 18px; background: var(--panel); border: 2.5px solid var(--line); font-size: 14.5px; text-align: center; min-height: 36px; }
.bubble.warn { border-color: var(--yellow); background: #FFF6D6; }
.bubble.danger { border-color: var(--danger); color: #c2463f; background: #FFECEA; }

.queue { display: flex; align-items: center; gap: 6px; min-height: 30px; font-size: 12px; overflow: hidden; }
.queue .wait { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 3px; border-radius: 13px; background: #fff8ecb8; border: 2px dashed var(--line); }
.queue .mini-cat { width: 26px; height: 22px; }
.queue .more { opacity: .7; }
.need { display: inline-flex; align-items: center; gap: 1px; }
.need .food { width: 24px; height: 24px; } .need .food.f-pudding { width: 34px; }
.need b { font-size: 12.5px; font-weight: 400; }
.need.ok { opacity: .38; }

.tables { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: end; margin-inline: -8px; padding: 0 8px 8px; overflow: hidden;
 }
.game[data-tables="3"] .tables { grid-template-columns: repeat(3, 1fr); padding-inline: 8%; gap: 8px; }
.card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 3px 6px; border-radius: 16px; border: 3px solid transparent; height: 100%; max-height: 250px; min-height: 0; justify-content: flex-end; transition: border-color .15s, background .15s; }
.order-bubble { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 3px; min-height: 46px; width: 100%; padding: 4px 2px; background: var(--panel); border: 2.5px solid var(--line); border-radius: 14px; position: relative; }
.order-bubble::after { content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--line); border-bottom: 0; }
.card .order-bubble .need .food { width: 28px; height: 28px; } .card .order-bubble .need .food.f-pudding { width: 40px; }
.card .order-bubble .need b { font-size: 14px; }
/* 고양이는 남는 높이만큼만 자란다 — 화면이 짧거나 예약 주문이 떠도 접시와 인내도 막대는 가려지지 않는다 */
.cat { width: 100%; max-width: 104px; flex: 1 1 0; min-height: 34px; max-height: 88px; margin-top: 2px; }
.card .cat img { animation: bob 3.2s ease-in-out infinite; }
.card:nth-child(2n) .cat img { animation-delay: 1.1s; } .card:nth-child(3n) .cat img { animation-delay: 2s; }
.card.low .cat img { animation: shake .5s infinite; }
.plate { flex: none; display: flex; gap: 2px; width: 100%; padding: 3px; background: var(--panel); border: 2.5px solid var(--brown); border-radius: 12px; }
.slot { flex: 1 1 0; aspect-ratio: 1; min-width: 0; border-radius: 9px; background: #F1E4CF; box-shadow: inset 0 2px 0 #e0cfb4; position: relative; display: grid; place-items: center; }
.slot.w2 { flex: 2 1 0; aspect-ratio: 2; margin-right: 0; }
.slot.filled { background: #fffaf0; box-shadow: inset 0 -2px 0 #eadfcd; }
.slot .food { width: 92%; height: 92%; }
.slot.moved::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); border: 1.5px solid #fff; }
.slot.spoiled { background: #d8d2c4; }
.slot.spoiled::before { content: '✕'; position: absolute; z-index: 1; color: var(--danger); font-size: 17px; text-shadow: 0 0 3px #fff; }
.slot.dragging { opacity: .3; }
.slot.pop .food { animation: pop .3s ease-out; } @keyframes pop { 0% { transform: translateY(-14px) scale(1.25); } 60% { transform: translateY(2px) scale(.94); } }
.slot .fresh { inset: 1px; }
.pat { flex: none; width: 100%; height: 9px; border-radius: 5px; background: #5b382733; overflow: hidden; }
.pat em { display: block; height: 100%; border-radius: 5px; background: #6CCB8F; }
.pat em.mid { background: var(--yellow); } .pat em.low { background: var(--danger); }
.card.low { border-color: var(--danger); background: #ef6c6422; animation: lowPulse .8s infinite; } @keyframes lowPulse { 50% { border-color: #ef6c6455; } }
.card.locked, .card.empty, .card.closed { justify-content: center; opacity: .8; align-self: stretch; }
.lock-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: #5b382726; font-size: 13px; width: 100%; }
.lock-box img { width: 34px; height: 34px; } .lock-box b { font-size: 20px; font-weight: 400; }
.card.ghost.happy .cat { animation: jump .5s; } .card.ghost.angry { animation: shake .4s; }
.card.ghost .order-bubble { font-size: 16px; }
@keyframes jump { 30% { transform: translateY(-12px) scale(1.06); } } @keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.dragging-on .can-drop { border-color: #5CC98A !important; background: #a7dfc466; }
.dragging-on .card.no-drop, .dragging-on .resv.no-drop { opacity: .45; }
.dragging-on .box.can-drop { box-shadow: 0 0 0 3px #5CC98A; }
.drag-ghost { position: absolute; left: 0; top: 0; aspect-ratio: 1; pointer-events: none; z-index: 30; filter: drop-shadow(0 8px 6px #0005); }

.resv-wrap:empty { display: none; }
.resv { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 16px; background: #FFF1C9; border: 3px solid var(--yellow); position: relative; animation: curIn .3s; }
.resv .tag { background: var(--danger); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 9px; }
.resv .order-bubble { width: auto; min-height: 0; padding: 2px 8px; border-radius: 12px; } .resv .order-bubble::after { display: none; }
.resv .plate { width: 118px; flex: none; } .resv .pat { position: absolute; left: 10px; right: 10px; bottom: -6px; width: auto; height: 6px; background: #5b382755; }
.resv-t { margin-left: auto; font-size: 17px; font-weight: 400; color: #c2463f; }

.tray { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 6px; }
.box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 80px; padding: 5px; border-radius: 16px; background: var(--panel); border: 3px solid var(--brown); box-shadow: 0 4px 0 var(--wood-d); font-size: 13px; }
.box > b { font-size: 19px; font-weight: 400; line-height: 1; } .box > img { width: 34px; height: 34px; } .box small { font-size: 9.5px; opacity: .65; }
.box.reloc.zero { background: #e9dcc6; } .box.reloc.zero > b { color: var(--danger); }
.box.trash.full { background: #FFD9D5; }
.temp-slots { display: flex; gap: 4px; justify-content: center; width: 100%; }
.temp-slots .slot { flex: 0 0 64px; height: 50px; aspect-ratio: auto; background: none; box-shadow: none; }
.temp-slots .slot.filled { background: url(assets/ui/plate.webp?v=3) center / contain no-repeat; cursor: grab; }
.temp-slots .slot.filled .food { width: 70%; height: 80%; margin-top: -8px; }
.temp-slots .slot.w2 { flex-basis: 76px; border-radius: 28px; }
.boosters { display: flex; gap: 5px; }
.boost { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border-radius: 10px; background: #fff8ecc9; border: 2px solid var(--line); font-size: 11.5px; }
.boost small { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; } .boost img { width: 13px; height: 13px; }
.boost:disabled { opacity: .4; }
.boosters:empty { display: none; }

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.fx-text { position: absolute; transform: translate(-50%, 0); white-space: nowrap; font-size: 18px; color: #fff; -webkit-text-stroke: 5px var(--brown); paint-order: stroke fill; animation: floatUp .85s ease-out forwards; }
.fx-text.good { color: var(--yellow); } .fx-text.bad { color: #ffb3ad; } .fx-text.combo { color: var(--sky); font-size: 15px; margin-top: 22px; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -46px); } }

/* ── 겹침 화면 ── */
#overlay { position: absolute; inset: 0; z-index: 50; background: #3a241ab8; display: flex; align-items: center; justify-content: center; padding: 18px; }
.sheet { width: 100%; max-width: 340px; max-height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 18px 20px; border-radius: 26px; background: var(--cream); border: 4px solid var(--brown); box-shadow: 0 8px 0 #3d2518; text-align: center; animation: sheetIn .25s ease-out; }
@keyframes sheetIn { from { transform: translateY(24px) scale(.94); opacity: 0; } }
.sheet h2 { margin: 0; font-size: 26px; font-weight: 400; } .sheet h3 { margin: -6px 0 0; font-size: 19px; font-weight: 400; }
.sheet .tip { margin: 0; font-size: 15px; line-height: 1.45; } .sheet .meta { margin: 0; font-size: 12px; opacity: .7; }
.intro-cat { width: 120px; height: 100px; margin-top: -4px; }
.result-cat { width: 160px; height: 150px; margin-top: -4px; }
.intro-foods { display: flex; gap: 6px; justify-content: center; } .intro-foods .food { width: 40px; height: 40px; }
.ribbon { padding: 6px 26px; border-radius: 16px; background: var(--wood); color: var(--cream); border: 3px solid var(--brown); text-shadow: 0 2px 0 var(--brown); box-shadow: 0 4px 0 var(--wood-d); }
.ribbon.dark { background: #6b5a52; }
.stars.big { display: flex; gap: 4px; } .stars.big i { width: 52px; height: 52px; } .stars.big i.on { animation: starIn .45s var(--d) both; }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25); } }
.rows { list-style: none; margin: 0; padding: 0; width: 100%; font-size: 15px; }
.rows li { display: flex; justify-content: space-between; padding: 5px 4px; border-bottom: 2px dashed var(--line); } .rows b { font-weight: 400; }
.reward { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 14px; border-radius: 14px; background: #FBEED6; font-size: 15px; }
.reward b { display: inline-flex; align-items: center; gap: 5px; font-size: 22px; font-weight: 400; } .reward img { width: 26px; height: 26px; }
.btn-row { display: flex; gap: 10px; width: 100%; }
.reason { margin: 0; font-size: 18px; color: #c2463f; }
.tipbox { width: 100%; padding: 10px 12px; border-radius: 14px; background: #fff; border: 2.5px solid var(--line); text-align: left; font-size: 14px; }
.tipbox b { display: inline-block; padding: 1px 8px; border-radius: 7px; background: var(--brown); color: var(--cream); font-size: 12px; font-weight: 400; } .tipbox p { margin: 6px 0 0; line-height: 1.4; }
.toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 18px; padding: 4px 6px; }
.toggle input { display: none; } .toggle i { width: 52px; height: 30px; border-radius: 15px; background: #cbb89c; position: relative; transition: background .15s; }
.toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input:checked + i { background: #6CCB8F; } .toggle input:checked + i::after { transform: translateX(22px); }
.sheet textarea { width: 100%; font: 11px/1.3 ui-monospace, monospace; }

/* ── 디버그 ── */
.debug { position: fixed; left: 6px; bottom: 6px; z-index: 99; max-width: 300px; font: 11px/1.2 system-ui; background: #000c; color: #fff; border-radius: 8px; padding: 4px 6px; }
.debug summary { cursor: pointer; } .debug-body { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.debug button, .debug select { font: inherit; color: #fff; background: #444; border-radius: 4px; padding: 3px 5px; } .debug button:disabled { opacity: .4; }
#auto-out { position: fixed; top: 0; left: 0; z-index: 99; margin: 0; font: 10px monospace; background: #fffc; max-width: 100vw; white-space: pre-wrap; }

@media (max-height: 700px) {
  .cat { max-width: 62px; } .box { min-height: 66px; } .temp-slots .slot { flex-basis: 46px; height: 46px; } .order-bubble { min-height: 38px; }
  .bubble { font-size: 13px; padding: 5px 12px; min-height: 30px; } .hud2 { min-height: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ── 조작법 애니메이션 ── */
.howto { margin: 0; width: 250px; }
.howto + .howto { margin-top: 2px; }
.h-stage { position: relative; width: 250px; height: 118px; border-radius: 14px; background: #FBEED6; overflow: hidden; }
.howto figcaption { margin-top: 5px; font-size: 13px; line-height: 1.35; }
.h-belt { position: absolute; left: 0; right: 0; top: 8px; height: 36px; background: repeating-linear-gradient(90deg, #6b5a52 0 26px, #5f4f48 26px 30px); border-block: 4px solid #4a3d37; animation: belt 1.2s linear infinite; }
.h-plate { position: absolute; top: 64px; width: 110px; display: flex; gap: 2px; padding: 3px; background: var(--panel); border: 2.5px solid var(--brown); border-radius: 11px; }
.h-plate.a { left: 8px; } .h-plate.b { left: 130px; }
.h-plate i { width: 24px; height: 24px; border-radius: 7px; background: #F1E4CF; display: block; position: relative; }
.h-plate i.no::after { content: '!'; position: absolute; right: -3px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); border: 1.5px solid var(--brown); font: 700 9px/12px system-ui; text-align: center; font-style: normal; }
.h-plate i img { padding: 2px; }
.h-temp, .h-bin { position: absolute; left: 164px; top: 50px; width: 66px; text-align: center; }
.h-temp img { height: 44px; } .h-temp small { font-size: 10px; display: block; margin-top: -2px; }
.h-bin { left: 180px; top: 50px; width: 50px; } .h-bin img { height: 40px; } .h-bin b { font-size: 12px; font-weight: 400; position: relative; display: block; height: 14px; }
.h-count { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font-size: 15px; } .h-count b { font-weight: 400; display: inline-block; position: relative; width: 12px; height: 16px; vertical-align: -2px; }
.h-count s, .h-count u, .h-bin s, .h-bin u { position: absolute; left: 0; right: 0; text-decoration: none; }
.h-count s, .h-bin s { animation: hOld 4s infinite; } .h-count u, .h-bin u { color: var(--danger); animation: hNew 4s infinite; }
@keyframes hOld { 0%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } } @keyframes hNew { 0%, 72% { opacity: 0; } 76%, 96% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; } }
.h-food { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; animation: hMove 4s ease-in-out infinite; z-index: 2; }
.h-food.spoiled img { filter: grayscale(1) brightness(.62) sepia(.5) hue-rotate(50deg); }
.h-hand { position: absolute; left: -6px; top: 0; font-size: 26px; font-style: normal; animation: hHand 4s ease-in-out infinite; z-index: 3; filter: drop-shadow(0 2px 1px #0004); }
@keyframes hMove {
  0%, 18% { transform: translate(var(--x0), var(--y0)) scale(1); opacity: 1; }
  30% { transform: translate(var(--x0), calc(var(--y0) - 8px)) scale(1.25); }
  62% { transform: translate(var(--x1), calc(var(--y1) - 8px)) scale(1.25); }
  72%, 92% { transform: translate(var(--x1), var(--y1)) scale(1); opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) scale(1); opacity: 0; } }
@keyframes hHand {
  0% { transform: translate(calc(var(--x0) + 30px), calc(var(--y0) + 40px)); opacity: 0; }
  14%, 18% { transform: translate(var(--x0), var(--y0)) scale(.9); opacity: 1; }
  30% { transform: translate(var(--x0), calc(var(--y0) - 8px)) scale(.9); }
  62% { transform: translate(var(--x1), calc(var(--y1) - 8px)) scale(.9); }
  72% { transform: translate(var(--x1), var(--y1)) scale(1); opacity: 1; }
  84%, 100% { transform: translate(calc(var(--x1) + 24px), calc(var(--y1) + 34px)); opacity: 0; } }
/* 길게 누르기: 누른 채로 동그라미가 차오른 다음에야 뜬다 */
.long .h-food { animation-name: hMoveLong; } .long .h-hand { animation-name: hHandLong; }
@keyframes hMoveLong {
  0%, 36% { transform: translate(var(--x0), var(--y0)) scale(1); opacity: 1; }
  44% { transform: translate(var(--x0), calc(var(--y0) - 8px)) scale(1.25); }
  68% { transform: translate(var(--x1), calc(var(--y1) - 8px)) scale(1.25); }
  76%, 92% { transform: translate(var(--x1), var(--y1)) scale(1); opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) scale(1); opacity: 0; } }
@keyframes hHandLong {
  0% { transform: translate(calc(var(--x0) + 30px), calc(var(--y0) + 40px)); opacity: 0; }
  10%, 36% { transform: translate(var(--x0), var(--y0)) scale(.86); opacity: 1; }
  44% { transform: translate(var(--x0), calc(var(--y0) - 8px)) scale(.86); }
  68% { transform: translate(var(--x1), calc(var(--y1) - 8px)) scale(.86); }
  76% { transform: translate(var(--x1), var(--y1)) scale(1); opacity: 1; }
  86%, 100% { transform: translate(calc(var(--x1) + 24px), calc(var(--y1) + 34px)); opacity: 0; } }
.h-ring { position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(var(--salmon) calc(var(--a) * 1turn), #0000 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4px)); animation: hRing 4s linear infinite; }
@property --a { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes hRing { 0%, 10% { --a: 0; opacity: 1; } 36% { --a: 1; opacity: 1; } 40%, 100% { --a: 1; opacity: 0; } }
/* 레일에서 놓치는 장면: 그대로 흘러가 떨어진다 */
.k-miss .h-food { animation: hMiss 4s linear infinite; }
@keyframes hMiss { 0% { transform: translate(var(--x0), var(--y0)); } 70% { transform: translate(var(--x1), var(--y1)); opacity: 1; } 71%, 100% { transform: translate(var(--x1), var(--y1)); opacity: 0; } }
.k-miss .h-bin { left: 100px; top: 56px; }
.sheet.howto-sheet { gap: 8px; }

/* 레일 위를 흘러가는 초밥 */
.belt-items { display: block; padding: 0; }
.belt-items > * { position: absolute; left: 0; top: 50%; margin: 0; will-change: transform; }
.cur { animation: none; margin-top: calc(clamp(104px, 15dvh, 132px) / -2) !important; margin-left: calc(clamp(104px, 15dvh, 132px) / -2) !important; }
.belt .side { margin-top: -37px !important; margin-left: -37px !important; }
.cur.leaving { animation: leaving .35s infinite; } @keyframes leaving { 50% { filter: drop-shadow(0 0 12px var(--danger)) drop-shadow(0 0 3px var(--danger)); } }
.cur.none { left: 50%; }
.box.trash.bump { animation: pulse .4s 2; }

@media (max-height: 760px) { .game { gap: 4px; } .next { padding-block: 3px; } .resv { padding-block: 3px; } .queue { min-height: 26px; } }

/* ── 놓은 초밥 판정 ── */
.slot.ok::after, .slot.bad::after { content: '✓'; position: absolute; inset: -3px; border-radius: 11px; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 0 4px #2f9d5c, 0 0 2px #2f9d5c; border: 3px solid #5CC98A; background: #5cc98a3d; animation: judgeOk .6s ease-out forwards; pointer-events: none; z-index: 2; width: auto; height: auto; }
.slot.bad::after { content: '✕'; text-shadow: 0 0 4px #c2463f, 0 0 2px #c2463f; border-color: var(--danger); background: #ef6c6452; animation: judgeBad .9s ease-out forwards; }
.slot.bad { animation: shake .3s 2; }
@keyframes judgeOk { 0% { transform: scale(.5); opacity: 0; } 25% { transform: scale(1.25); opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes judgeBad { 0% { transform: scale(1.5); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.card.react-happy .cat { animation: jump .5s; } .card.react-angry { animation: shake .35s; }
.card.react-angry .order-bubble { border-color: var(--danger); background: #FFECEA; }
.card.react-happy .order-bubble { border-color: #5CC98A; }
.fx-text.judge { font-size: 15px; } .fx-text.ok { color: #9af0bd; }

/* 레일 위 판정: 초밥이 있던 자리에 크게 */
.belt-judge { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; display: grid; place-items: center; animation: beltJudge .45s ease-out forwards; }
.belt-judge b { position: relative; font-size: 64px; line-height: 1; font-weight: 700; color: #fff; -webkit-text-stroke: 7px #2f9d5c; paint-order: stroke fill; }
.belt-judge.ok { background: radial-gradient(#5cc98a99, #5cc98a00 70%); box-shadow: 0 0 0 5px #5CC98A inset; }
.belt-judge.bad { background: radial-gradient(#ef6c64aa, #ef6c6400 70%); box-shadow: 0 0 0 5px var(--danger) inset; animation-name: beltJudgeBad; }
.belt-judge.bad b { -webkit-text-stroke-color: #c2463f; }
/* 제자리에서 찍히고 바로 사라진다 — 움직이지 않는다 */
@keyframes beltJudge { 0% { transform: scale(.5); opacity: 0; } 30% { transform: scale(1.12); opacity: 1; } 55% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes beltJudgeBad { 0% { transform: scale(1.4); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.bubble.good { border-color: #5CC98A; background: #E9F9EF; color: #23804a; }

.ai-note { margin: 0; font-size: 11px; text-align: center; color: var(--brown); opacity: .7; }
.lobby .ai-note { color: #fff3df; opacity: .92; text-shadow: 0 1px 2px #5b3827; font-size: 11.5px; }

/* 한 바퀴 돌아온 초밥 */
.next .chip.again, .cur.again { position: relative; }
.next .chip.again::after, .cur.again::after { content: '↻'; position: absolute; right: -3px; top: -4px; width: 17px; height: 17px; border-radius: 50%; background: var(--yellow); color: var(--brown); font-size: 12px; line-height: 17px; text-align: center; font-style: normal; border: 1.5px solid var(--brown); }
.cur.again::after { right: 8px; top: 2px; width: 26px; height: 26px; font-size: 18px; line-height: 26px; border-width: 2px; }
.cur.again { filter: drop-shadow(0 0 10px #ffd060) drop-shadow(0 0 4px #e0961c); }

/* ── 접시 4칸: 주문 진행도 ── */
.slot.ghost { background: #F1E4CF; } .slot.ghost .food { opacity: .28; filter: grayscale(.5); width: 84%; height: 84%; }
.slot.spare { background: none; box-shadow: none; border: 2px dashed #d9c7a8; }
.slot .mk { position: absolute; right: -3px; top: -5px; width: 15px; height: 15px; border-radius: 50%; font: 700 10px/15px system-ui, sans-serif; text-align: center; color: #fff; border: 1.5px solid #fff; z-index: 3; pointer-events: none; }
.slot .mk.ok { background: #4fbf7f; } .slot .mk.no { background: var(--yellow); color: var(--brown); border-color: var(--brown); }
.slot.junk { background: #FFF3CF; box-shadow: inset 0 0 0 2px var(--yellow); }
.plate { gap: 2px; padding: 3px 2px; }
.game[data-tables="3"] .tables { padding-inline: 2%; gap: 8px; }
.pat.off { visibility: hidden; }
.card.waiting .plate { box-shadow: 0 0 0 3px var(--danger); animation: lowPulse .8s infinite; }
.card.stuck .plate { box-shadow: 0 0 0 3px var(--yellow); }
/* 이 초밥을 원하는 손님 — 아주 약하게 */
.card.want .order-bubble { box-shadow: 0 0 0 3px #5cc98a88; animation: wantPulse 1.1s ease-in-out infinite; }
@keyframes wantPulse { 50% { box-shadow: 0 0 0 5px #5cc98a33; } }
/* 틀린 초밥: 큰 빨간 X 대신 노란 ! */
.slot.bad::after { content: '!'; text-shadow: none; color: var(--brown); border-color: var(--yellow); background: #ffd06066; animation: judgeOk .8s ease-out forwards; }
.slot.bad { animation: none; }
.belt-judge.bad { background: radial-gradient(#ffd060bb, #ffd06000 70%); box-shadow: 0 0 0 5px var(--yellow) inset; }
.belt-judge.bad b { -webkit-text-stroke-color: #b9791a; }
.card.react-anxious .order-bubble { border-color: var(--yellow); background: #FFF6D6; }
/* 레일이 멈춰 있는 판: 초밥을 실어다 놓고 선다 */
.game.still .belt-track { animation-play-state: paused; }
.cur.arrive { animation: curArrive .32s ease-out both !important; }
@keyframes curArrive { from { translate: 190px 0; } to { translate: 0 0; } }

/* 재배치·임시 접시·쓰레기통은 레일 바로 아래로 올리고, 맨 아래 부스터는 크게 */
.tray { grid-template-columns: 1fr 1.5fr 1fr; }
.tray .box { min-height: 70px; flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 6px; row-gap: 0; padding: 4px 6px; }
.tray .box > span { width: 100%; text-align: center; font-size: 12.5px; }
.tray .box small { display: none; }
.tray .box > img { width: 32px; height: 32px; }
.tray .box > b { font-size: 22px; }
.tray .temp-slots .slot { flex-basis: 60px; height: 44px; }
.boosters { gap: 6px; }
.boost { flex-direction: column; height: 52px; border-radius: 14px; gap: 1px; background: var(--panel); border: 2.5px solid var(--brown); box-shadow: 0 3px 0 var(--wood-d); font-size: 14px; }
.boost b { font-weight: 400; }
.boost small { font-size: 13px; } .boost img { width: 16px; height: 16px; }
.boost:disabled { opacity: .45; box-shadow: none; }
.tables { padding-bottom: 6px; }
@media (max-height: 700px) { .tray .box { min-height: 58px; } .boost { height: 44px; font-size: 13px; } }

/* 접시는 2×2 로 크게 — 손님 4명일 때도 칸이 손가락으로 집힐 만큼 커진다 */
.card .plate { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; width: 100%; max-width: 104px; border-radius: 14px; }
.card .plate .slot { aspect-ratio: 1.25; border-radius: 10px; }
.card .plate .slot.w2 { grid-column: span 2; aspect-ratio: 2.56; }
.card .plate .slot .food { width: 84%; height: 88%; }
.card .plate .slot .mk { right: -2px; top: -4px; width: 17px; height: 17px; font-size: 11px; line-height: 17px; }
.card { max-height: 290px; }
.cat { max-height: 96px; }

/* 접시 칸 안의 그림이 칸 높이를 밀어 올리지 않게 */
.card .plate .slot .food { position: absolute; inset: 7% 8%; width: auto; height: auto; }
/* 키가 작은 화면: 손님 주문 말풍선이 잘리지 않도록 위쪽을 줄인다 */
@media (max-height: 780px) {
  .belt { height: 88px; } .cur { width: 96px; height: 96px; margin-top: -48px !important; margin-left: -48px !important; }
  .cur .food { inset: 4px 22px 32px; }
  .tray .box { min-height: 54px; } .tray .box > img { width: 26px; height: 26px; } .tray .temp-slots .slot { height: 36px; }
  .card .plate .slot { aspect-ratio: 1.55; } .card .plate .slot.w2 { aspect-ratio: 3.2; }
  .order-bubble { min-height: 36px; padding-block: 2px; } .card .order-bubble .need .food { width: 24px; height: 24px; }
  .boost { height: 42px; font-size: 13px; } .cat { min-height: 26px; }
  .game { gap: 4px; } .bubble { min-height: 28px; padding-block: 4px; font-size: 13px; }
}
@media (max-height: 700px) { .queue { display: none; } .hud2 .pill { height: 24px; font-size: 13px; } }

/* 시작 안내가 화면보다 길어 「시작」 버튼이 가려지지 않게 */
.sheet.intro:has(.howto + .howto) .intro-cat, .sheet.intro:has(.howto + .howto) .intro-foods { display: none; }
@media (max-height: 800px) {
  .sheet { gap: 7px; padding: 14px 16px 16px; }
  .sheet.intro .intro-cat { width: 78px; height: 64px; } .sheet.intro .intro-foods { display: none; }
  .h-stage { height: 102px; } .howto figcaption { font-size: 12.5px; margin-top: 3px; }
  .sheet .tip { font-size: 14px; line-height: 1.35; } .sheet h2 { font-size: 23px; }
}
@media (max-height: 700px) { .sheet.intro:has(.howto) .intro-cat { display: none; } .sheet.intro .meta { display: none; } }

/* ── 조작법: 접시 읽는 법 · 임시 접시 막힘 · 부스터 ── */
.h-legend { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; }
.h-legend span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; }
.h-legend i { position: relative; width: 40px; height: 34px; border-radius: 9px; background: #fffaf0; box-shadow: inset 0 -2px 0 #eadfcd; display: block; animation: hLegend 4s infinite; }
.h-legend span:nth-child(2) i { animation-delay: 1s; } .h-legend span:nth-child(3) i { animation-delay: 2s; } .h-legend span:nth-child(4) i { animation-delay: 3s; }
@keyframes hLegend { 0%, 20%, 100% { transform: none; box-shadow: inset 0 -2px 0 #eadfcd; } 8% { transform: scale(1.18); box-shadow: 0 0 0 3px var(--salmon); } }
.h-legend i img { padding: 3px; } .h-legend i.gh { background: #F1E4CF; } .h-legend i.gh img { opacity: .3; filter: grayscale(.5); }
.h-legend i.sp { background: none; box-shadow: none; border: 2px dashed #d9c7a8; }
.h-legend i.no { background: #FFF3CF; box-shadow: inset 0 0 0 2px var(--yellow); }
.h-legend i b { position: absolute; right: -4px; top: -6px; width: 16px; height: 16px; border-radius: 50%; font: 700 10px/16px system-ui, sans-serif; text-align: center; color: #fff; background: #4fbf7f; border: 1.5px solid #fff; }
.h-legend i.no b { background: var(--yellow); color: var(--brown); border-color: var(--brown); }
.h-plate.wait { box-shadow: 0 0 0 3px var(--danger); animation: hWait 4s infinite; }
@keyframes hWait { 0%, 72% { box-shadow: 0 0 0 3px var(--danger); } 76%, 100% { box-shadow: 0 0 0 3px #5CC98A; } }
.k-jam .h-temp { left: 124px; } .k-jam .h-bin { left: 196px; top: 46px; }
.h-count > s, .h-count > u { position: static; display: none; } .h-count > s { display: inline; animation: hOldD 4s infinite; } .h-count > u { color: #23804a; }
.h-count:has(> s) { height: 18px; } .h-count > s, .h-count > u { position: absolute; left: 0; right: 0; display: block; }
@keyframes hOldD { 0%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
.h-btn { position: absolute; left: 50%; bottom: 7px; width: 120px; margin-left: -60px; height: 36px; border-radius: 11px; background: var(--panel); border: 2.5px solid var(--brown); box-shadow: 0 3px 0 var(--wood-d); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; line-height: 1.15; animation: hBtn 4s infinite; }
.h-btn b { font-weight: 400; } .h-btn small { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; } .h-btn img { width: 12px; height: 12px; }
@keyframes hBtn { 0%, 58%, 74%, 100% { transform: none; box-shadow: 0 3px 0 var(--wood-d); background: var(--panel); } 62%, 70% { transform: translateY(3px); box-shadow: 0 0 0 var(--wood-d); background: #FFE9A8; } }
.k-boostReloc .h-btn, .k-boostTemp .h-btn { left: auto; right: 8px; margin: 0; bottom: 10px; }
.k-boostReloc .h-plate, .k-boostTemp .h-plate { top: 62px; }
.k-boostTemp .h-plate { top: 70px; } .k-boostTemp .h-btn { bottom: 4px; }
.tap .h-hand { animation: hTap 4s ease-in-out infinite; }
@keyframes hTap {
  0% { transform: translate(calc(var(--x1) + 34px), calc(var(--y1) + 30px)); opacity: 0; }
  40%, 58% { transform: translate(var(--x1), var(--y1)); opacity: 1; }
  62%, 70% { transform: translate(var(--x1), calc(var(--y1) + 3px)) scale(.86); opacity: 1; }
  82% { transform: translate(var(--x1), var(--y1)); opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)); opacity: 0; } }
/* 인내도 */
.h-who { position: absolute; left: 0; right: 0; top: 8px; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 14px; }
.h-who i { width: 30px; height: 26px; display: block; }
.h-pat { position: absolute; left: 55px; right: 55px; top: 42px; height: 10px; border-radius: 5px; background: #5b382733; overflow: hidden; }
.h-pat em { display: block; height: 100%; border-radius: 5px; animation: hBar 4s infinite; }
@keyframes hBar { 0% { width: 26%; background: var(--danger); } 60% { width: 8%; background: var(--danger); } 72% { width: 6%; background: var(--danger); } 78%, 100% { width: 58%; background: var(--yellow); } }
.h-note { position: absolute; left: 0; right: 0; top: 55px; height: 16px; text-align: center; font-size: 12px; color: #c2463f; }
.h-note s, .h-note u { position: absolute; left: 0; right: 0; text-decoration: none; } .h-note s { animation: hOldD 4s infinite; } .h-note u { color: #23804a; animation: hNew 4s infinite; }
/* 임시 접시 +1 */
.k-boostTemp .h-temp { top: 6px; left: 150px; width: 50px; } .k-boostTemp .h-temp img { height: 34px; }
.k-boostTemp .h-temp.full em { position: absolute; left: 11px; top: 1px; width: 28px; height: 24px; display: block; }
.k-boostTemp .h-temp.two { left: 198px; animation: hNew 4s infinite; }
.k-boostTemp .h-plate.a { left: 8px; }
.k-jam .h-count { top: 8px; }

.boost.hint { background: #FFE9A8; animation: boostHint .9s ease-in-out infinite; }
@keyframes boostHint { 50% { transform: translateY(-4px); box-shadow: 0 7px 0 var(--wood-d), 0 0 0 3px var(--yellow); } }
.k-boostTemp .h-temp { left: 136px; width: 46px; } .k-boostTemp .h-temp.two { left: 186px; }
.k-boostTemp .h-temp.full em { left: 9px; }
.k-jam .h-bin { left: 194px; top: 40px; }

/* 조작법 장면 자리 조정(폐기·다시 만들기 규칙) */
.k-return .h-bin { left: 194px; top: 40px; } .k-jam .h-temp { left: 124px; }
.h-bin.full b { color: var(--danger); }
.k-boostTemp .h-temp { top: 66px; left: 14px; width: 46px; } .k-boostTemp .h-temp.two { left: 64px; }
.k-boostTemp .h-note { top: 48px; color: var(--brown); }
.h-onbelt { position: absolute; left: 110px; top: 11px; width: 32px; height: 28px; display: block; }

/* ── 조작법의 손(제미나이로 그린 그림) ── */
.h-hand { left: -11px; top: -2px; width: 36px; height: 44px; font-size: 0; filter: drop-shadow(0 2px 2px #0004); }
.h-hand img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.h-hand .p2 { opacity: 0; left: -4px; top: -6px; width: 118%; }
.tap .h-hand .p2 { animation: hPressTap 4s infinite; } .tap .h-hand .p1 { animation: hPressTapOff 4s infinite; }
.long .h-hand .p2 { animation: hPressLong 4s infinite; } .long .h-hand .p1 { animation: hPressLongOff 4s infinite; }
@keyframes hPressTap { 0%, 60% { opacity: 0; } 62%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes hPressTapOff { 0%, 60% { opacity: 1; } 62%, 72% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes hPressLong { 0%, 9% { opacity: 0; } 11%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes hPressLongOff { 0%, 9% { opacity: 1; } 11%, 36% { opacity: 0; } 40%, 100% { opacity: 1; } }

/* ── 스테이지 선택: 5장 × 10판 ── */
.select { padding-bottom: 0; }
.select-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; margin-inline: -12px; padding: 0 12px max(16px, env(safe-area-inset-bottom)); }
.chap { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; padding: 6px 12px; border-radius: 14px; background: var(--brown); color: var(--cream); font-size: 16px; font-weight: 400; }
.chap b { font-weight: 400; color: var(--yellow); } .chap small { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; } .chap small img { width: 15px; height: 15px; }
.select .grid { row-gap: 16px; }
.ending-again { margin: 18px 0 6px; }
.select .note { margin: 14px 0 6px; }

/* ── 엔딩 ── */
.ending { padding: 0; background: linear-gradient(#1c2350, #2a2f63 60%, #3b3070); }
.end-art { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 2 / 3; background: url(assets/bg/ending.webp?v=4) top / 100% auto no-repeat; animation: endIn 1.6s ease-out both; }
.end-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 22%; background: linear-gradient(#0000, #2a2f63); }
@keyframes endIn { from { opacity: 0; transform: scale(1.08); } }
.end-sign { position: absolute; left: 30%; top: 26.6%; width: 43%; height: 9%; display: grid; place-items: center; transform: rotate(1.5deg); font-size: min(5.6vw, 24px); color: var(--brown); white-space: nowrap; }
.end-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.end-confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 12px; border-radius: 2px; background: var(--c); animation: confetti 4.5s linear var(--d) infinite; }
@keyframes confetti { to { transform: translateY(105vh) rotate(720deg); } }
.end-story { position: absolute; left: 0; right: 0; bottom: 0; min-height: 30%; padding: 24px 22px max(26px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(#0000, #1c2350ee 35%); text-align: center; cursor: pointer; }
.end-story p { margin: 0; font-size: 21px; line-height: 1.4; color: #fff6e8; text-shadow: 0 2px 6px #000a; animation: lineIn .7s ease-out both; }
.end-story small { font-size: 12px; color: #fff6e8; opacity: .55; }
@keyframes lineIn { from { opacity: 0; transform: translateY(10px); } }
.end-panel { position: absolute; left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); padding: 18px; border-radius: 24px; background: var(--cream); border: 4px solid var(--brown); box-shadow: 0 8px 0 #1a1436; display: flex; flex-direction: column; gap: 10px; text-align: center; animation: sheetIn .4s ease-out; }
.end-panel h2 { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.3; }
.select .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cell small { display: block; width: 100%; text-align: center; text-overflow: ellipsis; }