/* 냥냥 스시 가게 — 밝고 캐주얼한 파스텔 목재(#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: 62px; width: 106px; display: flex; gap: 2px; padding: 3px; background: var(--panel); border: 2.5px solid var(--brown); border-radius: 11px; }
.h-plate.a { left: 10px; } .h-plate.b { left: 138px; }
.h-plate i { width: 30px; height: 30px; border-radius: 8px; background: #F1E4CF; display: block; }
.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: -16px; top: -16px; width: 32px; height: 32px; 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); }