/* r3-ui.css — shokudo 呈現輪（接圖輪）視覺層。
   色盤唯一來源＝天氣定案「a 暮色暖簾」10 hex（STATUS.md），±透明度可，禁第 11 色相、禁 #000/#fff 裸用。
   accent（暖簾茜 #a8503f）一款一色。字重定案：功能字 400／氛圍字 300（canon §1 兩檔內）。
   letterbox／場景外底色＝夜空頂家族，禁純黑。 */

:root {
  --night: #191830; --dusk: #262a4a; --alley: #3d3a55; --stone: #6a5a68; --noren: #a8503f;
  --lamp: #e2a45e; --lampcore: #f2d9a6; --wood: #6f5340; --text: #f4eee1; --ink: #221c28;
  --rgb-night: 25,24,48; --rgb-dusk: 38,42,74; --rgb-alley: 61,58,85; --rgb-stone: 106,90,104;
  --rgb-noren: 168,80,63; --rgb-lamp: 226,164,94; --rgb-lampcore: 242,217,166; --rgb-wood: 111,83,64;
  --rgb-text: 244,238,225; --rgb-ink: 34,28,40;
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--night); color: var(--text); font-family: var(--font); font-weight: 400; }
body { display: flex; align-items: center; justify-content: center; }

.app {
  position: relative; width: 100vw; height: 100vh; height: 100dvh; max-width: 430px; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 118%, rgba(var(--rgb-lamp), .16), rgba(var(--rgb-lamp), 0) 60%),
    linear-gradient(180deg, var(--night) 0%, var(--dusk) 42%, var(--alley) 78%, var(--stone) 128%);
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.app.basis-390 { width: 390px; height: 844px; max-width: 390px; }
.app.basis-660 { width: 390px; height: 660px; max-width: 390px; }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.on { display: flex; }
#screen-settle.on { animation: settle-in .6s ease-out; }
@keyframes settle-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 頂欄 ─────────────────────────────────────────────────────── */
.topbar { display: flex; align-items: baseline; gap: 10px; padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; flex: 0 0 auto; }
.topbar .day { font-size: 16px; letter-spacing: .12em; color: rgba(var(--rgb-text), .78); }
.topbar .spacer { flex: 1; }
.topbar .stat { font-size: 16px; letter-spacing: .04em; }
.topbar .stat b { font-weight: 400; font-size: 22px; color: var(--lampcore); }
.topbar .stat.rating b { color: var(--lamp); }
.topbar .unit { font-size: 16px; color: rgba(var(--rgb-text), .6); }

/* ── 卡片 ─────────────────────────────────────────────────────── */
.card { background: rgba(var(--rgb-dusk), .62); border: 1px solid rgba(var(--rgb-stone), .42); border-radius: 18px; padding: 14px; }
.card + .card { margin-top: 10px; }
.card > .hd { font-size: 16px; letter-spacing: .16em; color: rgba(var(--rgb-text), .62); margin-bottom: 10px; }
.body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; }
.body.noscroll { overflow: hidden; }

/* ── 預報卡 ───────────────────────────────────────────────────── */
.forecast { display: flex; align-items: center; gap: 12px; }
.forecast .glyph { width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 50% 40%, rgba(var(--rgb-lamp), .4), rgba(var(--rgb-lamp), 0) 70%); border: 1px solid rgba(var(--rgb-lamp), .3); }
.forecast .lines { flex: 1; }
.forecast .wx { font-size: 17px; font-weight: 400; }
.forecast .demand { font-size: 16px; color: var(--lamp); letter-spacing: .04em; }
.pricerow { display: flex; gap: 8px; margin-top: 12px; }
.pricechip { flex: 1; text-align: center; padding: 8px 4px; border-radius: 12px; background: rgba(var(--rgb-night), .5); border: 1px solid rgba(var(--rgb-stone), .3); }
.pricechip .k { font-size: 16px; color: rgba(var(--rgb-text), .66); }
.pricechip .v { font-size: 18px; font-weight: 400; color: var(--lampcore); }
.pricechip.up .v { color: var(--noren); }
.pricechip.down .v { color: var(--lamp); }
.pricechip.gone .v { color: rgba(var(--rgb-text), .5); font-size: 16px; }

/* ── 採購 stepper ─────────────────────────────────────────────── */
.buyrow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(var(--rgb-stone), .22); }
.buyrow:last-child { border-bottom: none; }
.buyrow .nm { flex: 1; font-size: 16px; }
.buyrow .sub { font-size: 16px; color: rgba(var(--rgb-text), .55); margin-left: 4px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 34px; height: 34px; border-radius: 10px; font-size: 20px; font-weight: 400; background: rgba(var(--rgb-alley), .8); color: var(--text); border: 1px solid rgba(var(--rgb-stone), .5); cursor: pointer; }
.stepper button:disabled { opacity: .34; cursor: default; }
.stepper .qty { min-width: 34px; text-align: center; font-size: 18px; font-weight: 400; color: var(--lampcore); font-variant-numeric: tabular-nums; }
.tiers { display: flex; gap: 6px; margin-top: 6px; }
.tier { flex: 1; text-align: center; padding: 8px 2px; border-radius: 12px; cursor: pointer; background: rgba(var(--rgb-night), .5); border: 1px solid rgba(var(--rgb-stone), .3); }
.tier.sel { border-color: var(--noren); background: rgba(var(--rgb-noren), .18); }
.tier.disabled { opacity: .32; cursor: default; }
.tier .sets { font-size: 17px; font-weight: 400; color: var(--lampcore); }
.tier .unit { font-size: 16px; color: rgba(var(--rgb-text), .6); }

/* ── 底部合計條 ───────────────────────────────────────────────── */
.footbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(env(safe-area-inset-bottom) + 14px); border-top: 1px solid rgba(var(--rgb-stone), .3); background: rgba(var(--rgb-night), .55); }
.footbar .cost { font-size: 16px; color: rgba(var(--rgb-text), .7); }
.footbar .cost b { font-size: 20px; font-weight: 400; color: var(--lampcore); display: block; }
.footbar .spacer { flex: 1; }
.btn-primary { padding: 13px 22px; border-radius: 14px; font-size: 16px; letter-spacing: .06em; font-weight: 400; background: var(--noren); color: var(--text); border: none; cursor: pointer; }
.btn-primary:disabled { opacity: .4; cursor: default; }

/* ── 備料屏 7 料格 ────────────────────────────────────────────── */
.prepgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.slot { background: rgba(var(--rgb-dusk), .6); border: 1px solid rgba(var(--rgb-stone), .38); border-radius: 14px; padding: 8px 11px; }
.slot .top { display: flex; align-items: baseline; gap: 6px; }
.slot .nm { flex: 1; font-size: 16px; }
.slot .tot { font-size: 20px; font-weight: 400; color: var(--lampcore); font-variant-numeric: tabular-nums; }
.slot .tot .u { font-size: 13px; font-weight: 300; color: rgba(var(--rgb-text), .55); }
.slot .ages { font-size: 16px; color: rgba(var(--rgb-text), .62); margin-top: 2px; line-height: 1.28; }
.slot .ages span { white-space: nowrap; }  /* 到期分佈一句一單位，禁在句中斷行（07-19 真機判例） */
.slot .ages .die { color: var(--noren); }
.slot .ages .raw { color: var(--lamp); }
.slot.empty .tot { color: rgba(var(--rgb-text), .34); }

/* ── 供餐屏：svc-top / stage(scene) / svc-dock 三段 flex，UI chrome 與場景零重疊 ── */
.svc-top { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; padding: calc(env(safe-area-inset-top) + 10px) 14px 6px; }
.svc-top .clock { flex: 1; height: 3px; border-radius: 2px; background: rgba(var(--rgb-stone), .3); overflow: hidden; }
.svc-top .clock i { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--rgb-lamp), .5), var(--lamp)); }
.svc-top .stat { font-size: 16px; }
.svc-top .stat b { font-weight: 400; font-size: 18px; color: var(--lampcore); }

/* stage：場景 fit-contain 進此盒；letterbox 底色＝夜空頂家族（禁純黑） */
.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--night); }
.scene-space { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scene-space .bg { position: absolute; left: 0; top: 0; display: block; image-rendering: auto; }
.stock-layer, .shadow-layer, .actor-layer, .occ-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 接地陰影：sprite 本身無影（美術交付規格），這層補。橢圓對齊腳底錨點、隨 --cs 一起縮放。
   墨色取自 10 色盤 #221c28；只給站／走的角色，坐姿不給（腳不在錨點上）。 */
.shadow-layer { pointer-events: none; }
.shadow-layer .shad {
  position: absolute; width: 150px; height: 48px;
  transform: translate(-50%, -50%) scale(var(--cs, 1));
  background: radial-gradient(ellipse at 50% 50%, rgba(34, 28, 40, .75) 0%, rgba(34, 28, 40, .38) 46%, rgba(34, 28, 40, 0) 72%);
}
/* F2 遮擋前景：畫在角色之上（DOM 在 actor-layer 之後）＝桌面前緣擋住坐姿下半身。
   貼位＝資產左上角，禁縮放／重採樣（切片是 bg 原像素，縮了就對不齊）。 */
.occ-layer { pointer-events: none; }
.occ-layer .occ { position: absolute; }
.occ-layer .occ.mir { transform: scaleX(-1); }   /* 同型桌右側實例＝以資產自身中心鏡像 */
.stock-layer .stock { position: absolute; transform: translate(-50%, -50%); }   /* stock overlay 以素材中心對齊格中心 */
.actor-layer .sprite { position: absolute; transform: translate(-50%, -100%) scale(var(--cs, 1)); transform-origin: 50% 100%; }  /* 底部中心對齊 anchor */
.actor-layer .sprite.mir { transform: translate(-50%, -100%) scale(calc(var(--cs, 1) * -1), var(--cs, 1)); }  /* 面向反向＝水平鏡像 */
/* 側坐＝往面朝方向推 30% 身寬（不是底部中心）：尾端 translateX 先作用於自身座標系、再被 scale 吃掉
   ＝推的是「縮放後」的身寬；鏡像版因 x 為負而自動往反向推。膝蓋越過去的部分由 F2 桌面片遮掉。
   30% 是實測值（0/30/40/50 四檔對照）：背貼上椅背、臉還讀得到；50%＝完全後緣對齊但臉被桌子吃掉。 */
.actor-layer .sprite.sit { transform: translate(-50%, -100%) scale(var(--cs, 1)) translateX(30%); }
.actor-layer .sprite.sit.mir { transform: translate(-50%, -100%) scale(calc(var(--cs, 1) * -1), var(--cs, 1)) translateX(30%); }
/* sprite 是棚拍暖光畫的、場景是暗巷夜色：不壓一點就是「亮度不屬於這個房間」＝貼紙感的另一半。
   壓很輕（客人是內容，要看得清楚）；再暗一階要 user 真機裁。 */
.actor-layer .sprite { filter: brightness(.93) saturate(.96); }

/* 門口干預卡（diegetic，投影到 door；stage 相對定位）。interventionGated 用 data 旗，noZoneOverlap 不計此卡 */
.door-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.door-grp { position: absolute; pointer-events: auto; background: rgba(var(--rgb-night), .72); border: 1px solid rgba(var(--rgb-lamp), .4); border-radius: 10px; padding: 3px 5px; display: flex; align-items: center; gap: 4px; }  /* 07-19 真機回饋：壓扁＋降不透明度，別擋玄關 */
.door-grp .acts { display: flex; gap: 4px; }
.door-grp .acts button { font-size: 15px; padding: 4px 9px; border-radius: 8px; font-weight: 400; cursor: pointer; background: rgba(var(--rgb-alley), .9); color: var(--text); border: 1px solid rgba(var(--rgb-stone), .5); }
.door-grp .acts button.reject { border-color: rgba(var(--rgb-noren), .7); color: var(--noren); }

/* 打烊短句（§1.5；可點跳過） */
.closing { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 18px; letter-spacing: .08em; color: var(--lampcore); background: rgba(var(--rgb-ink), .5); padding: 12px; opacity: 0; transition: opacity .6s ease-out; pointer-events: none; }
.closing.show { opacity: 1; pointer-events: auto; cursor: pointer; }

/* svc-dock：製作列（挪單）＋庫存條，固定底段，不覆蓋場景 */
.svc-dock { flex: 0 0 auto; background: rgba(var(--rgb-night), .6); border-top: 1px solid rgba(var(--rgb-stone), .32); }
.kitchen { padding: 8px 12px 4px; }
.kitchen .lbl { font-size: 16px; letter-spacing: .14em; color: rgba(var(--rgb-text), .5); margin-bottom: 4px; }
.klist { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; min-height: 52px; align-items: flex-start; }  /* min-height＝dock 高度與 ticket 數無關（穩定 stage 高、防場景 transform 抖動） */
.ticket { flex: 0 0 auto; min-width: 92px; border-radius: 10px; padding: 6px 8px; font-size: 16px; position: relative; background: rgba(var(--rgb-dusk), .82); border: 1px solid rgba(var(--rgb-stone), .42); cursor: pointer; }
.ticket .dn { font-weight: 400; line-height: 1.15; }
.ticket .ch { font-size: 16px; color: rgba(var(--rgb-text), .58); margin-top: 2px; }
.ticket .ch.dinein { color: var(--lamp); }
.ticket .pd { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; }
.ticket .pd.s1 { background: var(--lamp); }
.ticket .pd.s2 { background: var(--noren); }
.ticket.locked { cursor: default; border-color: rgba(var(--rgb-lamp), .6); }
.ticket.locked .cook { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 0 0 10px 10px; background: var(--lamp); }
.ticket.locked .lk { font-size: 16px; color: var(--lamp); letter-spacing: .1em; }
.ticket .up { position: absolute; left: 5px; bottom: 4px; font-size: 11px; color: rgba(var(--rgb-text), .5); }
.invbar { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px calc(env(safe-area-inset-bottom) + 8px); border-top: 1px solid rgba(var(--rgb-stone), .3); }
.invchip { flex: 0 0 auto; font-size: 16px; padding: 3px 8px; border-radius: 8px; background: rgba(var(--rgb-dusk), .7); border: 1px solid rgba(var(--rgb-stone), .3); white-space: nowrap; }
.invchip b { font-weight: 400; color: var(--lampcore); }
.invchip.low b { color: var(--noren); }

.toast { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); font-size: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(var(--rgb-ink), .82); border: 1px solid rgba(var(--rgb-stone), .5); color: var(--text); opacity: 0; transition: opacity .3s ease-out; pointer-events: none; z-index: 5; }
.toast.show { opacity: 1; }

/* ── 日結屏 ───────────────────────────────────────────────────── */
.progress .daynum { font-size: 18px; }
.progress .daynum b { font-weight: 400; font-size: 24px; color: var(--lampcore); }
.progress .ladder { margin-top: 10px; }
.progress .lbar { height: 8px; border-radius: 999px; background: rgba(var(--rgb-stone), .3); overflow: hidden; }
.progress .lbar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--rgb-lamp), .6), var(--lamp)); }
.progress .lcap { margin-top: 6px; }
.ledgerrow { display: flex; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid rgba(var(--rgb-stone), .2); }
.ledgerrow .k { flex: 1; font-size: 16px; }
.ledgerrow .v { font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ledgerrow .v.pos { color: var(--lamp); }
.ledgerrow .v.neg { color: rgba(var(--rgb-text), .8); }
.ledgerrow.memo { padding: 4px 2px 4px 16px; border-bottom: none; }
.ledgerrow.memo .k { font-size: 16px; color: rgba(var(--rgb-text), .55); }
.ledgerrow.memo .v { font-size: 16px; color: rgba(var(--rgb-text), .6); }
.ledgerrow.net { border-bottom: none; border-top: 1px solid rgba(var(--rgb-stone), .5); margin-top: 4px; padding-top: 12px; }
.ledgerrow.net .k { font-size: 18px; }
.ledgerrow.net .v { font-size: 28px; }
.ledgerrow.net .v.pos { color: var(--lampcore); }
.ledgerrow.net .v.neg { color: var(--noren); }
.autopsy .line { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px; font-size: 16px; }
.autopsy .line .tag { font-size: 16px; letter-spacing: .1em; color: rgba(var(--rgb-text), .5); min-width: 68px; }
.autopsy .line .n { font-weight: 400; color: var(--lampcore); font-variant-numeric: tabular-nums; }
.autopsy .line .n.bad { color: var(--noren); }
.autopsy .line .d { color: rgba(var(--rgb-text), .68); }
.autopsy .none { font-size: 16px; color: rgba(var(--rgb-text), .5); padding: 6px 2px; }
.dishrow { display: flex; align-items: baseline; gap: 8px; padding: 5px 2px; font-size: 16px; }
.dishrow .dn { flex: 1; }
.dishrow .sold { color: rgba(var(--rgb-text), .62); font-variant-numeric: tabular-nums; }
.dishrow .mg { font-weight: 400; color: var(--lamp); font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }
.dishrow .mg.neg { color: var(--noren); }
.endcard { margin: auto; text-align: center; padding: 30px; }
.endcard h1 { font-size: 26px; font-weight: 400; color: var(--lampcore); letter-spacing: .1em; }
.endcard p { font-size: 16px; color: rgba(var(--rgb-text), .74); margin-top: 12px; line-height: 1.6; }
.endfoot { justify-content: flex-end; }

/* ambient＝氛圍文字（可讀性地板白名單，非功能字） */
.ambient { color: rgba(var(--rgb-text), .4); font-size: 12px; letter-spacing: .1em; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }