/* 《大胃袋》demo 样式：固定顶视单餐桌 + 手偶底部居中 + 胶片式左右滑过场 */
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
/* v0.9 移动端：交互元素禁双击缩放/长按滚动，点按即响应 */
.dish, .sign, .shop-item, #bell, .pool-card, .big-btn { touch-action: manipulation; }
body {
  background: #2b2135; color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden; height: 100vh;
}
#scene { position: relative; width: 100vw; height: 100vh; }
.hidden { display: none !important; }

/* ── HUD ── */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; gap: 12px; padding: 10px 16px; align-items: center;
  background: rgba(0,0,0,.35);
}
.hud-item { font-size: 18px; font-weight: 700; text-shadow: 0 2px 4px #000; }
#hud-energy { color: #7fe07f; }
#hud-days { color: #ffd166; }
#hud-timer { color: #ff8fa3; font-size: 22px; }
#hud-badges { margin-left: auto; display: flex; gap: 6px; font-size: 22px; }
#hud-badges .badge { background: #4a3a5a; border-radius: 8px; padding: 2px 6px; cursor: help; }
#hud-badges .badge.flash { animation: badgeFlash .5s 3; }
@keyframes badgeFlash { 50% { background: #ffb703; transform: scale(1.25); } }

/* ── 餐桌（固定不动）── */
#table {
  position: absolute; inset: 52px 0 190px 0; margin: 12px;
  background: radial-gradient(ellipse at center, #a9714b 0%, #8b5a3b 70%, #6f4429 100%);
  border-radius: 40px; border: 10px solid #5a3520;
  box-shadow: inset 0 0 60px rgba(0,0,0,.4);
  overflow: hidden;
}
#panel-layer { position: absolute; inset: 0; }

/* ── 胶片过场：Panel 统一左滑出 / 右滑入 ── */
.panel {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  transition: transform .45s cubic-bezier(.6,0,.3,1), opacity .45s;
}
.panel.slide-out-left { transform: translateX(-110%); opacity: 0; }
.panel.slide-in-right { transform: translateX(110%); opacity: 0; }

/* ── 第一幕：价格立牌 ── */
.signs { display: flex; gap: 40px; align-items: flex-end; }
.sign {
  width: 170px; padding: 18px 12px; text-align: center; cursor: pointer;
  border-radius: 10px 10px 4px 4px; color: #3a2a1a; font-weight: 700;
  transition: transform .15s; box-shadow: 0 10px 0 -4px rgba(0,0,0,.3);
}
.sign:hover { transform: translateY(-8px) scale(1.04); }
.sign .fee { font-size: 28px; display: block; margin: 8px 0 4px; }
.sign .meta { font-size: 12px; font-weight: 400; opacity: .75; display: block; }
.sign.tier-0 { background: repeating-linear-gradient(45deg,#f4e4c1,#f4e4c1 12px,#ecd9b0 12px,#ecd9b0 24px); }
.sign.tier-1 { background: #c89b6d; color: #2f1f10; }
.sign.tier-2 { background: linear-gradient(160deg,#ffe08a,#d4af37); border: 2px solid #fff2c0; }
.sign.cant-afford { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.act-title { font-size: 26px; text-shadow: 0 3px 6px #000; }

/* ── 第二幕：菜品 ── */
.dish {
  position: absolute; width: 84px; text-align: center; cursor: pointer;
  transition: transform .1s; pointer-events: auto;
}
.dish .plate {
  font-size: 40px; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle, #fdfdfd 55%, #d9d9d9 75%, #b5b5b5 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,.35);
}
.dish.tier-3 .plate { box-shadow: 0 0 14px 3px gold, 0 4px 8px rgba(0,0,0,.35); }
.dish .dish-name { font-size: 12px; background: rgba(0,0,0,.55); border-radius: 6px; padding: 1px 5px; display: inline-block; }
.dish .tags { font-size: 10px; opacity: .85; }
.dish:hover { transform: scale(1.08); }
.dish .pbar { height: 5px; background: rgba(0,0,0,.4); border-radius: 3px; margin-top: 3px; }
.dish .pbar i { display: block; height: 100%; background: #7fe07f; border-radius: 3px; width: 0; }
.dish.queued .plate { outline: 3px dashed #ffd166; }
.dish.eating .plate { outline: 3px solid #7fe07f; animation: chew .35s infinite alternate; }
@keyframes chew { to { transform: scale(.92); } }
.dish .queue-idx {
  position: absolute; top: -4px; right: 2px; min-width: 20px; height: 20px; line-height: 20px;
  border-radius: 10px; background: #ffd166; color: #4a3a08; font-size: 12px; font-weight: 700;
  text-align: center; padding: 0 4px; box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.dish.eating .queue-idx { background: #7fe07f; color: #173217; }

/* 悬停效果卡（v0.7 点击式投喂） */
.dish-tooltip {
  position: fixed; z-index: 100; max-width: 220px; pointer-events: none;
  background: rgba(20,14,8,.92); border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}
.dish-tooltip .tt-title { font-size: 14px; font-weight: 700; }
.dish-tooltip .tt-meta { opacity: .8; }
.dish-tooltip .tt-tags { opacity: .7; }
.dish-tooltip .tt-effect { color: #ffd166; margin-top: 3px; }

/* 取餐区/面前队列占位 */
#front-zone {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: min(420px, 92vw); height: 96px; border: 2px dashed rgba(255,255,255,.4);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  z-index: 5; pointer-events: none;
}
#front-zone .hint { opacity: .5; font-size: 14px; }

/* ── 铃铛 ── */
#bell {
  position: absolute; right: 26px; bottom: 210px; z-index: 30;
  width: 92px; height: 92px; border-radius: 50%; border: none; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffe9a0, #d4af37 60%, #8a6d1f);
  font-size: 34px; box-shadow: 0 6px 0 #5c4713, 0 10px 16px rgba(0,0,0,.5);
}
#bell span { display: block; font-size: 12px; color: #4a3a08; font-weight: 700; }
#bell:active { transform: translateY(4px); box-shadow: 0 2px 0 #5c4713; }
#bell.cooling { filter: grayscale(.7) brightness(.75); cursor: not-allowed; }
#bell.ring { animation: ring .4s; }
@keyframes ring { 25% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }

/* ── 手偶 ── */
#puppet {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 20; text-align: center; pointer-events: none;
}
#puppet-face {
  width: 190px; height: 130px; margin: 0 auto; position: relative;
  background: radial-gradient(ellipse at 50% 35%, #ff9d76, #e76f51 75%);
  border-radius: 48% 48% 40% 40%;
  box-shadow: 0 8px 18px rgba(0,0,0,.5), inset 0 -14px 24px rgba(0,0,0,.18);
}
#eyes { font-size: 52px; line-height: 74px; letter-spacing: 12px; }
#mouth { font-size: 40px; line-height: 40px; margin-top: -8px; }
#puppet-name { font-size: 13px; opacity: .8; margin-top: 4px; }
#puppet.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(calc(-50% - 8px)) rotate(-3deg); } 60% { transform: translateX(calc(-50% + 8px)) rotate(3deg); } }
/* 嘴部通道 */
.mouth-closed { content: "👄"; }
.mouth-chew { animation: chew .35s infinite alternate; }
/* 耐受条：挂手偶头顶两侧 */
#tol-bars { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; }
.tol { width: 38px; text-align: center; font-size: 13px; }
.tol .bar { height: 6px; background: rgba(0,0,0,.5); border-radius: 3px; margin-top: 2px; }
.tol .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #7fe07f; }
.tol.warn .bar i { background: #ffb703; }
.tol.danger .bar i { background: #ef476f; }
.tol.danger { animation: blink .4s infinite alternate; }
@keyframes blink { to { opacity: .4; } }

/* ── 第三/四幕：台秤与工资条 ── */
.scale-box, .payslip {
  background: #fdf6e3; color: #3a2a1a; border-radius: 14px; padding: 26px 38px;
  min-width: 380px; box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.scale-box { text-align: center; }
.scale-icon { font-size: 64px; }
.payslip h3 { border-bottom: 2px dashed #b0a089; padding-bottom: 8px; margin-bottom: 10px; }
.payslip .row { display: flex; justify-content: space-between; gap: 40px; padding: 4px 0; font-size: 16px; }
.payslip .row.fine { color: #c1121f; }
.payslip .row.total { font-size: 22px; font-weight: 800; border-top: 2px solid #3a2a1a; margin-top: 8px; padding-top: 8px; }
.strike { text-decoration: line-through; }

/* ── 第五幕：时钟 ── */
.clock-face { font-size: 110px; }
.clock-face.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.clock-days { font-size: 34px; font-weight: 800; color: #ffd166; }
.coin { display: inline-block; animation: coinIn .5s; }
@keyframes coinIn { from { transform: translateY(24px); opacity: 0; } }

/* ── 第六幕：货架 ── */
.shelf { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 720px; }
.shop-item {
  width: 128px; background: #f1e3c8; color: #3a2a1a; border-radius: 10px;
  padding: 12px 8px; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.25);
}
.shop-item .ico { font-size: 38px; }
.shop-item .nm { font-weight: 700; font-size: 14px; margin: 4px 0 2px; }
.shop-item .ds { font-size: 11px; opacity: .8; min-height: 44px; }
.shop-item .pr { font-weight: 800; margin: 6px 0; }
.shop-item button {
  border: none; border-radius: 6px; padding: 5px 14px; cursor: pointer;
  background: #2a9d8f; color: #fff; font-weight: 700;
}
.shop-item button:disabled { background: #999; cursor: not-allowed; }
.shop-actions { display: flex; gap: 14px; align-items: center; }
.big-btn {
  border: none; border-radius: 10px; padding: 12px 30px; font-size: 18px; font-weight: 800;
  background: #e76f51; color: #fff; cursor: pointer; box-shadow: 0 5px 0 #a33d24;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a33d24; }
.consumable-btn { background: #6a4c93 !important; }

/* ── 终幕 ── */
.gameover-box { text-align: center; }
.gameover-box .seal {
  display: inline-block; background: #c1121f; color: #fff; font-size: 30px; font-weight: 900;
  padding: 10px 34px; transform: rotate(-8deg); border: 4px solid #fff; border-radius: 6px;
}
.gameover-box .days { font-size: 54px; font-weight: 900; color: #ffd166; margin: 18px 0; }

/* ── toast 提示 ── */
#toast {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); padding: 8px 20px; border-radius: 20px;
  font-size: 15px; opacity: 0; transition: opacity .25s; z-index: 60; pointer-events: none;
}
#toast.show { opacity: 1; }
.float-num {
  position: absolute; font-weight: 900; font-size: 20px; color: #7fe07f;
  animation: floatUp 1s forwards; pointer-events: none; z-index: 40; text-shadow: 0 2px 3px #000;
}
.float-num.boost { color: #ffd166; font-size: 16px; }
@keyframes floatUp { to { transform: translateY(-50px); opacity: 0; } }

/* ── 菜品三选一弹窗（不暂停计时，半透明压层） ── */
.pool-offer {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
}
.pool-offer-box {
  background: #2b2b3a; border: 3px solid #ffd166; border-radius: 14px;
  padding: 18px 26px; text-align: center;
}
.pool-offer-title { font-size: 17px; font-weight: 800; margin-bottom: 12px; color: #ffd166; }
.pool-offer-cards { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; }
.pool-card {
  width: 92px; padding: 12px 8px; border-radius: 10px; cursor: pointer;
  background: #3a3a4d; border: 2px solid transparent; transition: transform .12s, border-color .12s;
}
.pool-card:hover { transform: translateY(-4px); border-color: #ffd166; }
.pool-card .ico { font-size: 40px; }
.pool-card .nm { font-size: 13px; font-weight: 700; margin-top: 6px; }

/* ── v0.9 移动端适配（≤640px 精调，桌面样式不受影响）── */
@media (max-width: 640px) {
  /* 餐桌与面前队列 */
  #table { inset: 44px 0 150px 0; margin: 6px; border-width: 6px; border-radius: 24px; }
  #front-zone { height: 84px; }
  /* 菜品盘 */
  .dish { width: 64px; }
  .dish .plate { width: 54px; height: 54px; font-size: 30px; }
  .dish .dish-name { font-size: 11px; }
  .dish .queue-idx { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
  /* 铃铛与手偶 */
  #bell { width: 72px; height: 72px; right: 12px; bottom: 160px; font-size: 26px; }
  #puppet-face { width: 150px; height: 105px; }
  #eyes { font-size: 42px; }
  #mouth { font-size: 32px; }
  /* HUD */
  #hud { padding: 8px 10px; gap: 8px; }
  .hud-item { font-size: 14px; }
  #hud-timer { font-size: 18px; }
  #hud-badges { font-size: 18px; }
  /* 第一幕立牌 */
  .signs { gap: 14px; flex-wrap: wrap; justify-content: center; }
  .sign { width: 116px; padding: 12px 8px; }
  .sign .fee { font-size: 22px; }
  /* 台秤与工资条 */
  .scale-box, .payslip { min-width: 0; width: min(92vw, 380px); padding: 18px 20px; }
  .payslip .row { font-size: 14px; }
  /* 货架 */
  .shelf { max-width: 94vw; }
  .shop-item { width: 104px; }
  .shop-item .ds { min-height: 40px; }
  /* 三选一 */
  .pool-offer-cards { flex-wrap: wrap; }
  .pool-card { width: 84px; }
  /* 时钟 / 终幕 / 提示 */
  .clock-face { font-size: 80px; }
  .clock-days { font-size: 26px; }
  .gameover-box .days { font-size: 40px; }
  .gameover-box .seal { font-size: 22px; }
  #toast { font-size: 13px; }
  .dish-tooltip { max-width: 72vw; }
}