/* =========================================================
   深夜麵館 · 視覺規範 v5
   夜色暖光 / 木作質感 / 剋制動效；390×844 優先
   ========================================================= */
:root{
  --bg:#0a0706;
  --bg2:#150e0c;
  --ink:#f8ead9;
  --ink-2:#dcc3ab;
  --muted:#9b8371;
  --amber:#e79f55;
  --gold:#ffd179;
  --gold-deep:#f2a63c;
  --red:#cf4a34;
  --green:#79c392;
  --wood-1:#5a3222;
  --wood-2:#2a1712;
  --line:rgba(255,198,132,.16);
  --card-line:rgba(255,198,132,.16);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.2,.9,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#070404;color-scheme:dark}
body{
  font-family:-apple-system,"PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--ink);
  font-feature-settings:"tnum" 1;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

.skip-link{
  position:absolute;left:12px;top:-64px;z-index:10;
  padding:9px 14px;border-radius:10px;
  background:#1b1210;border:1px solid rgba(255,196,120,.35);
  color:#ffe3b8;font-size:12px;letter-spacing:1px;
  transition:top .2s ease;
}
.skip-link:focus{top:calc(10px + var(--safe-t))}

#app{
  position:relative;
  width:100%;height:100%;max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 62% at 50% -6%,#2c1a14 0%,#160e0c 50%,#0a0706 100%),
    linear-gradient(180deg,#100a09,#070404);
  box-shadow:0 0 90px rgba(0,0,0,.85) inset;
  overflow:hidden;
}

/* ---------- 背景 ---------- */
.bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stars{position:absolute;inset:0;opacity:.42}
.stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#ffe9c9;animation:twinkle 5s ease-in-out infinite;
  box-shadow:0 0 6px rgba(255,225,180,.3);
}
.stars i:nth-child(3n){width:3px;height:3px;opacity:.9}
.stars i:nth-child(5n){opacity:.18}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}

.moon{
  position:absolute;right:4px;top:88px;width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff8dd,#ffe0a0 48%,#e7a660 78%,#cf8944 100%);
  box-shadow:
    0 0 20px rgba(255,214,150,.5),
    0 0 54px rgba(255,178,90,.18),
    0 0 110px rgba(255,160,70,.08);
  opacity:.9;
}
.moon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 62% 38%,rgba(150,100,55,.3) 0 5px,transparent 6px),
    radial-gradient(circle at 44% 62%,rgba(150,100,55,.24) 0 4px,transparent 5px),
    radial-gradient(circle at 70% 70%,rgba(150,100,55,.16) 0 3px,transparent 4px);
}
.glow{
  position:absolute;left:50%;top:38%;width:150%;height:80%;
  transform:translate(-50%,-30%);
  background:radial-gradient(ellipse at center,rgba(255,168,78,.15),transparent 62%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.72}50%{opacity:1}}

.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(124% 88% at 50% 36%,rgba(0,0,0,0) 40%,rgba(0,0,0,.38) 80%,rgba(0,0,0,.7) 100%);
}

/* ---------- 頂欄 ---------- */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:calc(15px + var(--safe-t)) 18px 7px;
}
.brand-cn{
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  font-size:24px;font-weight:400;letter-spacing:5px;color:#ffe0ae;line-height:1.15;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.brand{min-width:0}
.brand-en{
  font-size:11px;letter-spacing:1.5px;color:var(--muted);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stats{display:flex;gap:18px;text-align:right;align-items:flex-end;flex:0 0 auto}
.top-actions{display:flex;align-items:flex-end;gap:10px;min-width:0}
.mute-btn{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,196,120,.18);
  background:rgba(255,240,222,.04);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,border-color .2s,opacity .2s,transform .1s;
}
.mute-btn img{width:18px;height:18px;display:block;pointer-events:none}
.mute-btn:active{transform:scale(.94)}
.mute-btn.is-muted{opacity:.6;border-color:rgba(255,196,120,.3)}
.stat{display:flex;align-items:baseline;gap:5px}
.stat-val{
  font-size:24px;font-weight:800;line-height:1.1;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:.3px;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.stat-val.bump{animation:valBump .34s var(--ease)}
@keyframes valBump{0%{transform:scale(1)}38%{transform:scale(1.12)}100%{transform:scale(1)}}
.stat-key{font-size:11px;color:var(--muted);letter-spacing:2px}
.stat:last-child .stat-val{font-size:19px;color:#ffb4a0;text-shadow:0 1px 0 rgba(0,0,0,.55)}

/* ---------- 場景 ---------- */
.scene{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;min-height:0;padding:6px 14px 0}

.shop{
  position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:0;
  animation:shopIn .7s var(--ease) both;
}
@keyframes shopIn{from{transform:translateY(12px)}to{transform:none}}

/* 遮陽棚：條紋布 + 下沿波浪 */
.sunshade{
  position:absolute;top:6%;left:8%;right:8%;height:34%;
  background:
    repeating-linear-gradient(90deg,rgba(158,56,41,.94) 0 26px,rgba(130,43,33,.94) 26px 52px),
    linear-gradient(180deg,rgba(255,190,130,.16),rgba(0,0,0,.25));
  border-radius:15px 15px 3px 3px;
  box-shadow:
    0 -2px 0 rgba(255,196,130,.28) inset,
    0 -18px 34px rgba(0,0,0,.45) inset,
    0 20px 44px rgba(0,0,0,.5);
  opacity:.94;
}
.sunshade::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:11px;pointer-events:none;
  background-image:radial-gradient(circle at 13px 0,rgba(136,47,36,.95) 0 12px,rgba(136,47,36,0) 12.5px);
  background-size:26px 12px;background-repeat:repeat-x;
}

.signboard{
  position:absolute;top:calc(6% + 4px);left:50%;transform:translateX(-50%);
  padding:9px 17px 8px 24px;border-radius:9px;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,rgba(0,0,0,.1) 1px 3px),
    linear-gradient(180deg,#4a2a1e 0%,#2c1712 58%,#1d100c 100%);
  border:1px solid rgba(255,205,140,.42);
  box-shadow:
    0 0 24px rgba(255,150,60,.3),
    0 6px 18px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,222,175,.25),
    inset 0 -10px 20px rgba(0,0,0,.4);
}
.signboard::before,
.signboard::after{
  content:"";position:absolute;top:-27px;width:2px;height:27px;
  background:linear-gradient(180deg,rgba(140,90,60,0),rgba(170,110,70,.8));
}
.signboard::before{left:17px;transform:rotate(7deg);transform-origin:bottom}
.signboard::after{right:17px;transform:rotate(-7deg);transform-origin:bottom}
.signboard span{
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  font-size:21px;letter-spacing:7px;color:#ffe4b3;
  text-shadow:0 1px 0 rgba(90,40,20,.9),0 0 14px rgba(255,170,70,.85);
}

.lantern{
  position:absolute;top:calc(6% + 52px);width:32px;height:44px;
  border-radius:50% / 42%;
  background:
    repeating-linear-gradient(90deg,rgba(110,20,12,.28) 0 2px,rgba(0,0,0,0) 2px 8px),
    radial-gradient(circle at 38% 32%,#ffb27a,#d24428 62%,#8d2015 100%);
  box-shadow:
    0 0 30px rgba(255,110,60,.55),
    0 0 70px rgba(255,90,40,.22),
    inset -4px -6px 12px rgba(80,10,5,.55),
    inset 3px 4px 10px rgba(255,200,150,.32);
  transform-origin:50% -14px;
  animation:sway 4.6s ease-in-out infinite;
}
.lantern::after{
  content:"";position:absolute;left:50%;top:50%;width:118px;height:118px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,140,70,.26),rgba(255,120,60,.08) 42%,transparent 66%);
  animation:lanternGlow 4.6s ease-in-out infinite;
  z-index:-1;
}
.lantern.left{left:12%}
.lantern.right{right:12%;animation-delay:-2.3s}
.lantern.right::after{animation-delay:-2.3s}
.lantern::before{
  content:"";position:absolute;left:50%;top:-14px;width:2px;height:14px;
  background:linear-gradient(180deg,rgba(255,190,120,.2),rgba(255,190,120,.55));
  transform:translateX(-50%);
}
.lantern i{
  position:absolute;left:50%;top:50%;width:7px;height:15px;
  transform:translate(-50%,-50%);border-radius:4px;
  background:rgba(255,226,166,.9);box-shadow:0 0 14px rgba(255,200,120,.95),0 0 30px rgba(255,170,80,.5);
}
@keyframes sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes lanternGlow{0%,100%{opacity:.7}50%{opacity:1}}

.window{
  position:relative;width:78%;max-width:340px;
  margin-bottom:14px;padding:18px 0 14px;
  display:flex;flex-direction:column;align-items:center;
  border-radius:14px;
  background:
    radial-gradient(130% 80% at 50% 4%,rgba(255,196,130,.22),rgba(255,150,70,.05) 62%,rgba(255,150,70,.015) 100%),
    linear-gradient(180deg,rgba(52,29,22,.55),rgba(24,14,11,.32));
  border:1px solid rgba(255,196,130,.26);
  box-shadow:
    0 0 50px rgba(255,150,60,.12),
    0 18px 40px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,228,190,.22),
    inset 0 -24px 44px rgba(0,0,0,.4);
}
.window::before{
  content:"";position:absolute;inset:7px;border-radius:9px;pointer-events:none;
  border:1px solid rgba(255,205,150,.12);
  box-shadow:inset 0 0 18px rgba(255,180,100,.08);
}
.shelf{display:flex;gap:26px;font-size:19px;opacity:.72;margin-bottom:8px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.shelf-ico{width:20px;height:20px;opacity:.55;display:block}
.pot{position:relative;font-size:50px;line-height:1;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.pot-img{width:44px;height:44px;display:block}
.pot::after{
  content:"";position:absolute;left:50%;bottom:-7px;width:82px;height:16px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,120,40,.3),transparent 70%);
  filter:blur(4px);
}
.pot-body{position:relative;z-index:1}
.pot.is-cooking .pot-body{animation:potShake .3s ease-in-out infinite}
@keyframes potShake{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1.5deg)}}
.steam{position:absolute;left:50%;top:-6px;transform:translateX(-50%);pointer-events:none}
.steam i{
  position:absolute;bottom:0;width:7px;height:7px;border-radius:50%;
  background:rgba(255,244,226,.5);filter:blur(2.5px);
  animation:steamUp 2.8s linear infinite;
}
.steam i:nth-child(1){left:-11px;animation-delay:0s}
.steam i:nth-child(2){left:0;animation-delay:.9s}
.steam i:nth-child(3){left:11px;animation-delay:1.8s}
@keyframes steamUp{
  0%{transform:translateY(0) scale(.6);opacity:0}
  18%{opacity:.6}
  100%{transform:translateY(-48px) scale(1.9);opacity:0}
}
.cook-track{
  width:70%;height:8px;margin-top:13px;border-radius:7px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35));
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,196,130,.16),inset 0 2px 4px rgba(0,0,0,.5);
}
.cook-track i{
  display:block;height:100%;width:100%;border-radius:7px;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,#ffc06a,#ff8a45 70%,#ff7438);
  box-shadow:0 0 14px rgba(255,140,60,.8),inset 0 1px 0 rgba(255,235,190,.5);
  transition:transform .08s linear,background .25s,box-shadow .25s;
}
.cook-track.is-sweet i{
  background:linear-gradient(90deg,#ffe29a,#ffb45a 55%,#ff8f4a);
  box-shadow:0 0 18px rgba(255,210,120,.95),inset 0 1px 0 rgba(255,245,210,.65);
}
.cook-hint{margin-top:9px;font-size:11px;letter-spacing:2.5px;color:var(--muted);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.cook-hint.is-sweet{color:#ffd9a0}
.combo-pill{
  margin-top:8px;align-self:center;
  padding:3px 11px;border-radius:999px;
  font-size:11px;letter-spacing:1.5px;font-weight:700;
  color:#3a1a08;background:linear-gradient(180deg,#ffe3b0,#f0a85a);
  box-shadow:0 4px 14px rgba(255,150,60,.35),inset 0 1px 0 rgba(255,255,255,.45);
  animation:comboPop .28s var(--ease);
}
.combo-pill.is-hot{
  background:linear-gradient(180deg,#fff0c8,#ff8a4a);
  box-shadow:0 0 18px rgba(255,140,50,.55),inset 0 1px 0 rgba(255,255,255,.5);
}
@keyframes comboPop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
.event-banner{
  position:relative;z-index:2;flex:0 0 auto;
  margin:2px 2px 0;padding:7px 12px;border-radius:10px;
  text-align:center;font-size:12px;letter-spacing:1px;line-height:1.45;
  color:#ffe7c2;
  background:linear-gradient(180deg,rgba(60,32,22,.92),rgba(28,16,12,.88));
  border:1px solid rgba(255,190,120,.28);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  animation:eventIn .35s var(--ease);
}
.event-banner strong{color:#ffd27a;font-weight:700}
@keyframes eventIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.counter{
  width:100%;height:38px;border-radius:11px 11px 0 0;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 2px,rgba(255,255,255,0) 2px 9px),
    linear-gradient(180deg,#5c3423,#331c13 66%,#1c0f0b);
  box-shadow:
    inset 0 2px 0 rgba(255,206,150,.24),
    inset 0 -14px 26px rgba(0,0,0,.55),
    0 -16px 32px rgba(255,150,60,.08);
}

/* ---------- 四季與節日裝飾（按真實月份自動，?season= / ?date= 可預覽） ---------- */
.season-props,.fest-props{display:none;position:absolute;inset:0;pointer-events:none;z-index:3}
#app.is-spring .season-props,#app.is-summer .season-props,
#app.is-autumn .season-props,#app.is-winter .season-props{display:block}
#app.is-festival .fest-props{display:block}
.season-set{display:none}
#app.is-spring .set-spring,#app.is-summer .set-summer,
#app.is-autumn .set-autumn,#app.is-winter .set-winter{display:block}

.prop{position:absolute;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.prop-peach{
  right:1%;top:43%;width:44px;height:66px;opacity:.92;
  transform-origin:50% 0;animation:summerSway 6.4s ease-in-out infinite;
}
.prop-kite{
  left:2%;top:39%;width:32px;height:42px;opacity:.9;
  animation:birdFloat 7.5s ease-in-out infinite;
}
.prop-maple{
  right:1%;top:43%;width:44px;height:59px;opacity:.92;
  transform-origin:50% 0;animation:summerSway 5.8s ease-in-out infinite;
}
.prop-persimmon{left:3%;bottom:42px;width:26px;height:26px}
.prop-snowman{
  right:2%;bottom:42px;width:32px;height:40px;
  transform-origin:50% 100%;animation:catBreath 5.2s ease-in-out infinite;
}
.prop-snow{left:4%;top:43%;width:20px;height:20px;opacity:.75;animation:snowDrift 8s ease-in-out infinite}
@keyframes birdFloat{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(6px,-5px) rotate(2deg)}}
@keyframes snowDrift{0%,100%{transform:translate(0,0);opacity:.45}50%{transform:translate(5px,7px);opacity:.9}}

/* 節日道具：一次只顯示當前節日那一個 */
.fest-prop{
  display:none;position:absolute;left:50%;bottom:10px;
  transform:translateX(-50%);filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
  animation:festBob 5.4s ease-in-out infinite;
}
#app[data-fest="chunjie"] .fp-chunjie,#app[data-fest="yuanxiao"] .fp-yuanxiao,
#app[data-fest="duanwu"] .fp-duanwu,#app[data-fest="qixi"] .fp-qixi,
#app[data-fest="zhongqiu"] .fp-zhongqiu,#app[data-fest="dongzhi"] .fp-dongzhi{display:block}
@keyframes festBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}

.summer-chime{
  position:absolute;right:20%;top:36%;width:20px;height:40px;
  transform-origin:50% 0;opacity:.86;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
  animation:summerSway 5.6s ease-in-out infinite;
}
.summer-fan{
  position:absolute;right:12%;top:46%;width:24px;height:20px;
  transform:rotate(-14deg);opacity:.8;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.summer-melon{
  position:absolute;left:3%;bottom:42px;width:34px;height:22px;
  image-rendering:pixelated;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.summer-cat{
  position:absolute;right:2%;bottom:42px;width:48px;height:40px;
  image-rendering:pixelated;transform-origin:50% 100%;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));
  animation:catBreath 4.8s ease-in-out infinite;
}
.summer-fireflies i{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:#ffe6a3;
  box-shadow:0 0 8px #ffd179,0 0 16px rgba(255,200,110,.6);
  opacity:.2;
  animation:firefly 7s ease-in-out infinite;
}
.summer-fireflies i:nth-child(1){left:12%;top:24%;animation-delay:0s}
.summer-fireflies i:nth-child(2){left:24%;top:18%;animation-delay:1.1s}
.summer-fireflies i:nth-child(3){left:78%;top:20%;animation-delay:2.4s}
.summer-fireflies i:nth-child(4){left:87%;top:31%;animation-delay:3.2s}
.summer-fireflies i:nth-child(5){left:16%;top:39%;animation-delay:4.5s}
.summer-fireflies i:nth-child(6){left:71%;top:41%;animation-delay:5.4s}
@keyframes summerSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes catBreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
@keyframes firefly{
  0%,100%{opacity:.15;transform:translate(0,0)}
  50%{opacity:.85;transform:translate(4px,-7px)}
}
@media (max-height:700px){.season-props,.fest-props{display:none!important}}
@media (max-width:340px){.season-props,.fest-props{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .summer-chime,.summer-cat,.summer-fireflies i,
  .prop-peach,.prop-kite,.prop-maple,.prop-snowman,.prop-snow,.fest-prop{animation:none}
}

/* ---------- 店面成長：店越大，門面越寬 ---------- */
#app[data-tier="1"] .sunshade{left:7%;right:7%}
#app[data-tier="2"] .sunshade{left:6%;right:6%}
#app[data-tier="3"] .sunshade{left:5%;right:5%}
#app[data-tier="4"] .sunshade{left:4%;right:4%}
#app[data-tier="2"] .signboard,#app[data-tier="3"] .signboard,#app[data-tier="4"] .signboard{
  border-color:rgba(255,214,150,.5);
  box-shadow:
    0 0 30px rgba(255,150,60,.38),
    0 6px 18px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,222,175,.3),
    inset 0 -10px 20px rgba(0,0,0,.4);
}
#app[data-tier="4"] .counter{
  box-shadow:
    inset 0 2px 0 rgba(255,222,170,.42),
    inset 0 -14px 26px rgba(0,0,0,.55),
    0 -16px 32px rgba(255,150,60,.14);
}

/* ---------- 顧客隊列 ---------- */
.queue-row{
  position:relative;flex:0 0 auto;
  display:flex;align-items:flex-end;gap:10px;
  padding-bottom:6px;
}
.queue{
  position:relative;flex:1;min-width:0;height:100px;
  display:flex;align-items:flex-end;gap:8px;
  padding:0 4px 4px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.queue::-webkit-scrollbar{display:none}

/* 主按鈕：右下拇指區，全屏唯一高亮 */
.main-btn{
  position:relative;
  flex:0 0 auto;width:76px;height:76px;border-radius:50%;border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:radial-gradient(circle at 50% 24%,#fff0c4,#ffd07a 34%,#f1a13f 64%,#c1631c 100%);
  color:#3b1a06;font-family:inherit;cursor:pointer;
  text-shadow:0 1px 0 rgba(255,244,210,.6);
  box-shadow:
    0 12px 26px rgba(255,140,50,.34),
    0 3px 0 rgba(120,55,10,.55),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -9px 16px rgba(150,70,10,.35);
  transition:transform .1s ease,box-shadow .3s;
}
.main-btn::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,190,110,.18);
  transition:border-color .3s,box-shadow .3s;
}
.main-btn::after{
  content:"";position:absolute;left:16%;top:9%;width:52%;height:22%;
  border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
  filter:blur(1px);
}
.main-btn:active{transform:translateY(2px) scale(.95);box-shadow:0 5px 14px rgba(255,140,50,.3),0 1px 0 rgba(120,55,10,.5),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -5px 12px rgba(150,70,10,.4)}
.main-btn:disabled{opacity:.72;filter:saturate(.45);cursor:default}
.main-btn:disabled .main-btn-cn{opacity:.85}
.main-btn-cn{font-size:18px;font-weight:700;letter-spacing:3px;line-height:1.1}
.main-btn.is-ready::before{
  border-color:rgba(255,200,120,.35);
  animation:readyRing 1.8s ease-in-out infinite;
}
.main-btn.is-hint::before{
  border-color:rgba(255,200,120,.45);
  animation:hintRing 2s ease-in-out infinite;
}
@keyframes hintRing{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes readyRing{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
.queue-empty{
  position:absolute;left:0;right:0;bottom:44px;text-align:center;
  font-size:12px;color:rgba(184,162,144,.88);letter-spacing:1.5px;
}
.queue-count{
  position:absolute;left:6px;top:0;padding:2px 7px;border-radius:9px;
  background:rgba(0,0,0,.35);color:var(--muted);font-size:10px;letter-spacing:1px;
  pointer-events:none;z-index:1;
}

.cust{
  flex:0 0 auto;width:64px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  appearance:none;background:none;border:0;padding:0;font-family:inherit;color:inherit;
  cursor:pointer;
  animation:custIn .44s cubic-bezier(.16,1,.3,1) both;
  transition:filter .2s ease;
}
@keyframes custIn{from{opacity:0;transform:translateX(28px) scale(.86)}to{opacity:1;transform:none}}
.cust:active{transform:scale(.94)}
.cust:focus-visible{outline-offset:3px;border-radius:10px}
.cust-face{
  position:relative;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:29px;line-height:1;
  background:radial-gradient(circle at 38% 28%,rgba(255,222,182,.2),rgba(255,255,255,.03) 70%);
  border:1px solid rgba(255,196,130,.24);
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,230,195,.22),
    inset 0 -8px 14px rgba(0,0,0,.22);
  transition:box-shadow .3s,border-color .3s;
}
.cust.mood-happy .cust-face{border-color:rgba(255,200,110,.5);box-shadow:0 0 18px rgba(255,180,90,.32),inset 0 1px 0 rgba(255,230,195,.28),inset 0 -8px 14px rgba(0,0,0,.2)}
.cust.mood-angry .cust-face{border-color:rgba(220,80,60,.7);box-shadow:0 0 20px rgba(220,70,50,.42),inset 0 1px 0 rgba(255,210,190,.2),inset 0 -8px 14px rgba(60,0,0,.25);animation:warn .9s ease-in-out infinite}
@keyframes warn{0%,100%{transform:none}50%{transform:translateX(-2px)}}
.cust-sprite{
  width:48px;height:48px;
  background:url(../assets/customers/citizens_idle.png) no-repeat;
  background-size:192px 384px;
  background-position-x:0;
  background-position-y:calc(var(--look, 0) * -48px);
  image-rendering:pixelated;
  animation:custIdle .9s steps(4) infinite;
}
/* 常客專屬立繪：6 人 × 4 表情（0 平靜 / 1 開心 / 2 疲憊 / 3 專屬動作） */
.cust-sprite.is-guest{
  background-image:url(../assets/customers/guests_idle.png);
  background-size:192px 1152px;
  background-position-y:calc((var(--g, 0) * 4 + var(--f, 0)) * -48px);
}
.cust.mood-angry .cust-sprite.is-guest{--f:2}
@keyframes custIdle{from{background-position-x:0}to{background-position-x:-192px}}
.cust.mood-angry .cust-face::after{
  content:"!";position:absolute;right:-2px;top:-3px;width:16px;height:16px;
  border-radius:50%;background:#c93b26;color:#ffe3b8;
  font-size:12px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.cust-patience{
  width:52px;height:5px;border-radius:3px;background:rgba(0,0,0,.55);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,196,130,.1);
}
.cust-patience i{
  display:block;height:100%;width:100%;border-radius:3px;
  transform:scaleX(1);transform-origin:left center;
  background:linear-gradient(90deg,#7fd79a,#d8e06a);
  box-shadow:0 0 8px rgba(140,220,150,.45);
  transition:transform .2s linear,background .3s;
}
.cust.mood-angry .cust-patience i{background:linear-gradient(90deg,#d8623f,#c93b26)}
.cust-dish{font-size:11px;color:var(--muted);letter-spacing:.5px}
.cust-top{
  margin-top:1px;padding:1px 6px;border-radius:8px;
  font-size:10px;letter-spacing:.5px;color:#3a1a08;
  background:linear-gradient(180deg,#ffe2b0,#e8a45a);
  box-shadow:0 2px 8px rgba(255,150,60,.28);
  animation:topPulse 1.6s ease-in-out infinite;
}
.cust-top.is-done{
  background:rgba(120,180,120,.35);color:#cfe8c8;animation:none;
  box-shadow:none;border:1px solid rgba(160,210,150,.25);
}
@keyframes topPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.cust.is-critic .cust-face{
  border-color:rgba(180,210,255,.55);
  box-shadow:0 0 18px rgba(140,180,255,.35),inset 0 1px 0 rgba(220,235,255,.25),inset 0 -8px 14px rgba(0,0,0,.2);
}
.cust.is-wish .cust-face{
  border-color:rgba(255,140,170,.55);
  box-shadow:0 0 18px rgba(255,120,160,.32),inset 0 1px 0 rgba(255,220,230,.25),inset 0 -8px 14px rgba(0,0,0,.2);
}
.cust.is-critic .cust-dish,.cust.is-wish .cust-dish{color:#ffd9b0}

/* 天氣氛圍 */
#app[data-weather="rain"] .glow{opacity:.55;filter:saturate(.85)}
#app[data-weather="rain"] .vignette{
  background:
    radial-gradient(124% 88% at 50% 36%,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 80%,rgba(0,0,0,.78) 100%),
    repeating-linear-gradient(185deg,transparent 0 14px,rgba(180,200,220,.035) 14px 15px);
}
#app[data-weather="fog"] .glow{opacity:.4;filter:blur(2px)}
#app[data-weather="fog"] .moon{opacity:.45;filter:blur(1px)}
#app[data-weather="fog"] .vignette{background:radial-gradient(100% 80% at 50% 40%,rgba(180,190,200,.12),rgba(0,0,0,.55) 70%,rgba(0,0,0,.82) 100%)}
#app[data-weather="wind"] .lantern{animation-duration:.7s}
#app[data-weather="wind"] .sunshade{filter:brightness(1.05)}
.summer-cat{pointer-events:auto;cursor:pointer;transition:transform .2s}
.summer-cat:active{transform:scale(.92)}

.cust.served{animation:servedOut .36s ease forwards}
@keyframes servedOut{to{opacity:0;transform:translateY(-16px) scale(.8)}}

/* ---------- 面板 ---------- */
.panel{
  position:relative;z-index:3;flex:0 0 auto;
  padding:6px 12px calc(10px + var(--safe-b));
  background:
    radial-gradient(130% 70% at 50% 0,rgba(48,27,21,.5),rgba(0,0,0,0) 70%),
    linear-gradient(180deg,rgba(14,9,8,0),rgba(12,8,7,.94) 26%,rgba(7,4,4,.99) 100%);
}
.panel::before{
  content:"";position:absolute;left:12px;right:12px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,196,120,.3),transparent);
}
.tabs{
  display:flex;gap:4px;justify-content:center;margin-bottom:8px;
  padding:3px;border-radius:22px;
  background:rgba(255,240,222,.03);
  border:1px solid rgba(255,196,120,.1);
  box-shadow:inset 0 1px 0 rgba(255,225,190,.06);
}
.tab{
  flex:1;
  appearance:none;border:1px solid transparent;border-radius:18px;
  background:transparent;color:var(--muted);
  font-size:12px;letter-spacing:3px;font-family:inherit;
  min-height:44px;
  padding:9px 0 8px 3px;cursor:pointer;
  transition:color .2s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.tab.is-active{
  color:#ffe0a8;border-color:rgba(255,196,120,.42);
  background:linear-gradient(180deg,rgba(255,180,90,.18),rgba(255,150,60,.06));
  box-shadow:0 0 10px rgba(255,150,60,.12),inset 0 1px 0 rgba(255,232,195,.3);
}
.tab-body{
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
  max-height:min(34vh,220px);overflow-y:auto;
  scrollbar-width:none;
}
.tab-body::-webkit-scrollbar{display:none}
/* 長文案卡片（日常任務 / 店面與老湯）佔滿整行，避免名稱換行 */
.card[data-d]{grid-column:span 2}
.card[data-s="store"],
.card[data-s="broth"],
.card[data-s="dish"],
.card[data-s="guests"],
.card[data-s="receipt"],
.card[data-m="review"]{grid-column:span 2}
a.card{text-decoration:none}
.card-note{grid-column:span 2;justify-content:center}
.card-wall{
  grid-column:span 2;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:3px;padding:8px 10px;cursor:default;
}
.card-wall:active{transform:none}
.wall-head{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:1px;color:#ffd9a8}
.wall-ico{width:14px;height:14px;opacity:.7}
.wall-count{margin-left:auto;font-size:10px;color:var(--muted);letter-spacing:.5px}
.wall-list{display:flex;flex-direction:column;gap:2px;margin-top:1px}
.wall-line{font-size:11px;line-height:1.6;color:rgba(255,230,200,.82);white-space:normal;word-break:break-word}
.wall-empty{font-size:11px;line-height:1.6;color:var(--muted)}

.card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:9px;
  width:100%;appearance:none;font-family:inherit;color:inherit;text-align:left;
  padding:8px 9px;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,241,222,.08),rgba(255,241,222,.028));
  border:1px solid var(--card-line);
  box-shadow:
    inset 0 1px 0 rgba(255,232,198,.14),
    0 6px 16px rgba(0,0,0,.3);
  cursor:pointer;
  transition:transform .12s ease,background .2s,border-color .2s,box-shadow .2s;
  animation:fadeUp .32s var(--ease) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card:active{transform:scale(.965)}
.card.is-max{opacity:.5;cursor:default}
.card.can-buy{
  border-color:rgba(255,205,120,.5);
  background:linear-gradient(180deg,rgba(255,190,100,.15),rgba(255,170,80,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,235,200,.28),
    0 0 22px rgba(255,160,60,.14),
    0 6px 16px rgba(0,0,0,.3);
}
.card.can-buy::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,215,140,.5),inset 0 0 14px rgba(255,170,70,.1);
  animation:buyPulse 2.8s ease-in-out infinite;
}
@keyframes buyPulse{0%,100%{opacity:.35}50%{opacity:.85}}
.card-ico{
  flex:0 0 auto;width:31px;height:31px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
  background:radial-gradient(circle at 40% 28%,rgba(255,210,150,.22),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,200,140,.16),0 3px 8px rgba(0,0,0,.25);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.card-ico-img{width:19px;height:19px;display:block}
.card-main{flex:1;min-width:0}
.card-name{font-size:12px;letter-spacing:.5px;color:#ffe6c0;display:flex;gap:4px;align-items:baseline;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.45)}
.card-lv{font-size:11px;color:#c2a58d;letter-spacing:.3px;white-space:nowrap}
.card-desc{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-cost{
  flex:0 0 auto;text-align:right;font-size:12px;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.3;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.card-cost small{display:block;font-size:10px;font-weight:400;color:rgba(185,160,140,.9);letter-spacing:.5px;text-shadow:none}
.cost-unit{font-size:9px;font-weight:400;color:var(--muted);letter-spacing:.5px;margin-left:2px}
.card[data-b] .card-desc{font-size:11px}
.card[data-m="reset"] .card-ico{
  background:radial-gradient(circle at 40% 28%,rgba(220,110,90,.16),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(214,92,72,.28),0 3px 8px rgba(0,0,0,.25);
}
.card[data-m="reset"] .card-name{color:#f0c4b6}
.card:focus-visible{outline-offset:1px}
.card-cost.lack{color:#8d7461}
.card-max{font-size:11px;color:var(--muted);letter-spacing:2px}
.sw{
  display:inline-block;position:relative;width:34px;height:20px;border-radius:12px;
  background:rgba(0,0,0,.45);vertical-align:-5px;
  box-shadow:inset 0 0 0 1px rgba(255,196,130,.2);
  transition:background .25s ease,box-shadow .25s ease;
}
.sw i{
  position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;
  background:#8d7461;box-shadow:0 2px 4px rgba(0,0,0,.4);
  transition:transform .25s var(--ease),background .25s ease;
}
.sw.is-on{
  background:rgba(255,180,90,.2);
  box-shadow:inset 0 0 0 1px rgba(255,205,120,.55),0 0 14px rgba(255,170,70,.22);
}
.sw.is-on i{transform:translateX(14px);background:linear-gradient(180deg,#ffe0a0,#f2a63c)}
.ad-tag{
  display:inline-block;font-size:10px;padding:4px 9px;border-radius:14px;
  background:rgba(255,200,110,.16);color:#ffd89a;
  border:1px solid rgba(255,200,110,.34);letter-spacing:1px;white-space:nowrap;
}

.badge{
  position:absolute;right:6px;top:6px;
  font-size:9px;padding:1px 5px;border-radius:6px;
  background:rgba(220,80,60,.22);color:#ff9c86;border:1px solid rgba(220,80,60,.35);
}

/* ---------- 飄字 / toast ---------- */
.float-layer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.coin-pop{
  position:absolute;font-size:15px;font-weight:800;letter-spacing:.5px;color:#ffe199;
  text-shadow:0 0 14px rgba(255,170,70,.8),0 2px 4px rgba(0,0,0,.6);
  animation:coinPop 1.05s cubic-bezier(.2,.8,.3,1) forwards;
  white-space:nowrap;
}
.coin-pop.bad{color:#ff8f74;text-shadow:0 0 12px rgba(220,70,50,.8),0 2px 4px rgba(0,0,0,.6)}
@keyframes coinPop{
  0%{opacity:0;transform:translate(-50%,0) scale(.7)}
  22%{opacity:1;transform:translate(-50%,-14px) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-54px) scale(1)}
}

/* 顧客小氣泡：點擊顧客時浮在頭頂 */
.cust-bubble{
  position:absolute;z-index:6;max-width:min(168px,48vw);
  padding:6px 9px 5px;border-radius:10px;
  background:rgba(38,22,17,.95);
  border:1px solid rgba(255,196,120,.38);
  box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,222,175,.12),0 0 18px rgba(255,150,60,.10);
  color:#ffe6c4;font-size:11px;line-height:1.55;letter-spacing:.3px;
  text-align:center;white-space:normal;word-break:break-word;
  transform:translateY(-100%);transform-origin:50% 100%;
  animation:bubbleLife 2.2s ease forwards;
}
.cust-bubble.no-tail::after{display:none}
.cust-bubble::after{
  content:"";position:absolute;left:var(--tail-x,50%);bottom:-5px;
  transform:translateX(-50%);width:0;height:0;
  border:5px solid transparent;border-top-color:rgba(38,22,17,.95);border-bottom:0;
}
@keyframes bubbleLife{
  0%{opacity:0;transform:translateY(calc(-100% + 7px)) scale(.9)}
  14%{opacity:1;transform:translateY(-100%) scale(1)}
  78%{opacity:1;transform:translateY(-100%)}
  100%{opacity:0;transform:translateY(calc(-100% - 6px))}
}

.toast{
  position:absolute;right:0;bottom:90px;left:auto;top:auto;
  transform:translateY(8px);
  max-width:min(240px,72%);padding:10px 16px;border-radius:18px;
  background:rgba(32,18,15,.9);
  border:1px solid rgba(255,196,120,.3);
  box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,222,175,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#ffe3b8;font-size:12px;letter-spacing:.5px;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .26s ease,transform .26s ease;z-index:6;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast::after{
  content:"";position:absolute;right:24px;bottom:-6px;width:11px;height:11px;
  background:rgba(32,18,15,.92);border-radius:0 0 3px 0;
  border-right:1px solid rgba(255,196,120,.3);
  border-bottom:1px solid rgba(255,196,120,.3);
  transform:rotate(45deg);
}

/* ---------- 彈窗 ---------- */
.modal-mask{
  position:absolute;inset:0;z-index:8;
  display:flex;align-items:center;justify-content:center;
  overscroll-behavior:contain;
  background:rgba(4,3,3,.68);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .2s ease both;
}
.modal-mask[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;
  width:84%;max-width:332px;padding:22px 18px 17px;border-radius:18px;
  background:
    radial-gradient(120% 60% at 50% 0,rgba(255,180,100,.1),rgba(0,0,0,0) 70%),
    linear-gradient(180deg,rgba(48,29,23,.98),rgba(20,13,11,.98));
  border:1px solid rgba(255,200,140,.3);
  box-shadow:
    0 30px 70px rgba(0,0,0,.72),
    0 0 60px rgba(255,140,60,.1),
    inset 0 1px 0 rgba(255,230,190,.2);
  animation:modalIn .3s cubic-bezier(.16,1,.3,1) both;
}
.modal::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,210,150,.45),transparent);
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.modal-title{
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  font-size:19px;letter-spacing:4px;
  color:#ffdb9c;text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.modal-title::after{
  content:"";display:block;width:46px;height:1px;margin:10px auto 0;
  background:linear-gradient(90deg,transparent,rgba(255,196,120,.45),transparent);
}
.modal-body{margin:13px 0 16px;font-size:13px;line-height:1.9;color:#e8d5bf;text-align:center}
.modal-body b{color:var(--gold);font-size:16px;text-shadow:0 0 12px rgba(255,180,80,.35)}
.modal-btn{
  display:block;width:100%;min-height:44px;padding:12px 0;border-radius:12px;border:0;
  font-family:inherit;font-size:14px;letter-spacing:2.5px;color:#2f1907;
  background:linear-gradient(180deg,#ffe3a6,#ffbc5e 46%,#ef9a3c);
  box-shadow:
    0 10px 24px rgba(255,150,60,.3),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -6px 12px rgba(160,80,10,.22);
  text-shadow:0 1px 0 rgba(255,245,215,.5);
  cursor:pointer;
  transition:transform .1s ease;
}
.modal-btn:active{transform:translateY(1px) scale(.985)}
.modal-btn.ghost{
  margin-top:8px;background:transparent;color:var(--muted);
  box-shadow:none;border:1px solid rgba(255,190,120,.18);font-size:12px;
  text-shadow:none;
}
.modal-btn:disabled{
  opacity:.5;cursor:default;pointer-events:none;
  filter:saturate(.6);box-shadow:none;transform:none;
}

.ad-progress{
  height:8px;border-radius:5px;background:rgba(0,0,0,.5);overflow:hidden;margin-top:12px;
  box-shadow:inset 0 0 0 1px rgba(255,196,130,.12);
}
.ad-progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#ffc06a,#ff8a45);
  box-shadow:0 0 12px rgba(255,140,60,.65);
}

/* ---------- 交互狀態（桌面懸停 / 鍵盤焦點） ---------- */
@media (hover:hover){
  .tab:hover{color:#d9c0a9;border-color:rgba(255,196,120,.22)}
  .card:hover{border-color:rgba(255,215,150,.34);box-shadow:inset 0 1px 0 rgba(255,235,200,.2),0 8px 20px rgba(0,0,0,.34)}
  .card.is-max:hover{border-color:var(--card-line);box-shadow:inset 0 1px 0 rgba(255,232,198,.14),0 6px 16px rgba(0,0,0,.3)}
  .main-btn:hover{filter:brightness(1.05)}
  .modal-btn:hover{filter:brightness(1.05)}
  .mute-btn:hover{background:rgba(255,240,222,.08);border-color:rgba(255,196,120,.35)}
  .cust:hover .cust-face{border-color:rgba(255,210,140,.55);box-shadow:0 0 20px rgba(255,180,90,.32),inset 0 1px 0 rgba(255,230,195,.25),inset 0 -8px 14px rgba(0,0,0,.2)}
}
:focus-visible{outline:2px solid rgba(255,209,121,.8);outline-offset:2px}
.main-btn:focus-visible{outline-offset:5px}

/* ---------- 響應式 ---------- */
@media (max-height:840px){
  .sunshade{top:5%;height:30%}
  .signboard{top:calc(5% + 3px)}
  .lantern{top:calc(5% + 50px)}
  .window{width:72%;margin-bottom:10px;padding:14px 0 12px}
  .pot{font-size:43px}
  .counter{height:34px}
  .tab-body{max-height:180px}
}
@media (max-height:760px){
  .sunshade{top:3%;height:22%}
  .signboard{top:calc(3% + 3px)}
  .lantern{top:calc(3% + 46px)}
}
@media (max-height:740px){
  .lantern{display:none}
}
@media (max-height:680px){
  .sunshade{top:4%;height:20%}
  .signboard{top:calc(4% + 2px)}
  .window{width:66%;margin-bottom:8px;padding:10px 0 9px}
  .pot{font-size:34px}
  .counter{height:28px}
  .queue{height:92px}
  .queue-empty{bottom:38px}
  .tab-body{max-height:180px}
  .brand-cn{font-size:21px}
  .stat-val{font-size:20px}
}
@media (max-width:370px){
  .tab{font-size:11px;letter-spacing:2px}
  .card-name{font-size:12px}
  .card-cost{font-size:12px}
  .stat-val{font-size:22px}
}

/* ---------- 短窗口緊湊模式：先砍裝飾，再砍櫃檯 ---------- */
@media (max-height:660px){
  .topbar{padding:calc(10px + var(--safe-t)) 18px 5px}
  .sunshade{top:4%;height:22%;opacity:.86}
  .signboard,.lantern{display:none}
  .shelf,.pot,.window::before{display:none}
  .window{width:82%;margin-bottom:8px;padding:10px 0 12px}
  .cook-track{width:100%;margin-top:0}
  .cook-hint{margin-top:6px}
  .counter{height:24px}
  .queue{height:92px}
  .queue-empty{bottom:38px}
  .tab-body{max-height:30vh}
  .main-btn{width:68px;height:68px}
}
@media (max-height:560px){
  .sunshade{display:none}
  .queue{height:86px}
  .queue-empty{bottom:36px}
  .tab-body{max-height:27vh}
  .toast{
    position:fixed;left:50%;right:auto;top:calc(60px + var(--safe-t));bottom:auto;
    max-width:min(300px,82%);padding:6px 12px;font-size:11px;
    transform:translateX(-50%) translateY(-6px);
  }
  .toast.show{transform:translateX(-50%) translateY(0)}
  .toast::after{right:50%;bottom:-6px;transform:translateX(50%) rotate(45deg)}
}
@media (max-height:480px){
  .topbar{padding:calc(8px + var(--safe-t)) 18px 4px}
  .counter{display:none}
  .window{padding:8px 0 9px;margin-bottom:6px}
  .cook-hint{margin-top:4px}
  .queue{height:82px}
  .queue-empty{bottom:34px}
  .tab-body{max-height:26vh}
  .modal{padding:16px 14px 13px;max-height:calc(100% - 16px);overflow-y:auto}
}

/* ---------- 超窄屏：單列卡片 + 收緊頂欄 ---------- */
@media (max-width:340px){
  .topbar{padding:calc(8px + var(--safe-t)) 14px 4px}
  .brand-cn{font-size:19px;letter-spacing:4px}
  .brand-en{font-size:10px;letter-spacing:1px;margin-top:2px}
  .stats{gap:12px}
  .stat-val{font-size:20px}
  .tab-body{grid-template-columns:1fr}
  .card[data-d],.card[data-s="store"],.card[data-s="broth"],.card[data-s="dish"],.card[data-s="guests"],.card[data-s="receipt"],.card[data-m="review"],.card-note,.card-wall{grid-column:auto}
}

/* ---------- 無障礙：減少動效 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .cust-bubble{animation:none!important;opacity:1;transform:translateY(-100%)}
}