:root{
  --cream:#fff7ea; --paper:#fffaf1; --brown:#5a3a24; --brown2:#8a6444; --caramel:#d9923a; --caramel-d:#c07a24;
  --mint:#8fc3a3; --rose:#f3b8b0; --line:rgba(90,58,36,.14);
  --font:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font);color:var(--brown)}
body{background:linear-gradient(180deg,#fbe4da 0%,#f8d9cc 45%,#f5dccf 100%)}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas#c2{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:6}
canvas#c.grabbing{cursor:grabbing}
canvas#c.pointer{cursor:pointer}
.card{z-index:2;background:rgba(255,250,241,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:22px;box-shadow:0 14px 40px rgba(110,60,30,.2)}
.brand{position:fixed;left:20px;top:16px;display:flex;gap:10px;align-items:center;pointer-events:none}
.brand .logo{width:42px;height:42px;border-radius:14px;background:var(--caramel);display:grid;place-items:center;font-size:24px;box-shadow:0 6px 16px rgba(217,146,58,.45)}
.brand h1{margin:0;font-size:18px;letter-spacing:.04em;line-height:1.15}
.brand small{display:block;font-size:12px;color:var(--brown2);letter-spacing:.12em}
.hint{position:fixed;left:50%;top:16px;transform:translateX(-50%);padding:9px 18px;border-radius:999px;font-size:13px;white-space:nowrap;pointer-events:none;max-width:calc(100vw - 760px);overflow:hidden;text-overflow:ellipsis}
@media (max-width:1180px){.hint{display:none}}
.tools{position:fixed;right:20px;top:16px;display:flex;gap:10px;z-index:7}
.ibtn{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--brown);border:1px solid rgba(255,255,255,.7);background:rgba(255,250,241,.9);backdrop-filter:blur(12px);cursor:pointer;box-shadow:0 6px 18px rgba(110,60,30,.18);transition:transform .15s,background .2s,color .2s}
.ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ibtn:hover{transform:translateY(-2px)}
.ibtn.on{background:var(--caramel);color:#fff}
.ibtn::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;white-space:nowrap;font-size:12px;font-family:var(--font);color:#fff;background:rgba(70,42,26,.92);padding:5px 10px;border-radius:8px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:.18s}
.ibtn:hover::after,.ibtn:focus-visible::after{opacity:1;transform:none}

/* 資訊卡 */
#info{position:fixed;left:20px;bottom:20px;width:330px;padding:20px 20px 18px;transform:translateX(-120%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.1),opacity .3s}
#info.show{transform:none;opacity:1}
#info .x{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:22px;color:var(--brown2);cursor:pointer;line-height:1;z-index:1}
.stage{position:relative;height:140px;margin:-8px -6px 30px;cursor:default;user-select:none;touch-action:auto}
.stage .glow{position:absolute;left:50%;top:48%;width:170px;height:170px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,214,150,.75) 0%,rgba(255,226,190,.35) 45%,rgba(255,240,220,0) 70%)}
.stage .pedestal{position:absolute;left:50%;bottom:10px;width:130px;height:20px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(rgba(90,58,36,.28),rgba(90,58,36,0) 70%)}
.stage .anchor{position:absolute;left:50%;top:42%;width:2px;height:2px}
.stage-tip{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:11px;color:var(--brown2);background:rgba(255,255,255,.7);padding:2px 10px;border-radius:999px;white-space:nowrap}
#info .tag{display:inline-block;font-size:11px;letter-spacing:.1em;padding:3px 10px;border-radius:999px;background:var(--mint);color:#26493a;font-weight:700}
#info .tag.dessert{background:var(--rose);color:#6b2a2a}
#info h2{margin:10px 0 0;font-size:24px;line-height:1.2}
#info .en{font-size:12px;color:var(--brown2);letter-spacing:.08em;margin-top:2px}
#info .price{display:inline-block;margin:10px 0 6px;font-size:22px;font-weight:800;color:var(--caramel-d)}
#info .stock{font-size:12px;color:var(--brown2);margin-left:8px}
#info p{margin:4px 0 12px;font-size:14px;line-height:1.6}
#info h4{margin:10px 0 6px;font-size:12px;letter-spacing:.14em;color:var(--brown2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.chip.al{background:#fff1dc;border-color:#f0cf9d;color:#8a5413}
#info .note{font-size:11px;color:var(--brown2);margin-top:8px;line-height:1.5}
#info .act{margin-top:14px;width:100%}

button.primary{font:inherit;font-weight:700;font-size:16px;letter-spacing:.06em;color:#fff;background:linear-gradient(180deg,#e5a04a,var(--caramel-d));border:0;border-radius:16px;padding:13px;cursor:pointer;box-shadow:0 8px 18px rgba(192,122,36,.4);transition:transform .15s,filter .2s}
button.primary:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}
button.primary:disabled{background:#d9c9b5;box-shadow:none;cursor:not-allowed;color:#fff9}

/* 訂單面板 */
#order{position:fixed;right:20px;bottom:20px;width:340px;max-height:62vh;display:flex;flex-direction:column;padding:16px 16px 16px}
#order header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
#order header h3{margin:0;font-size:18px;flex:1}
#order .badge{background:var(--caramel);color:#fff;border-radius:999px;font-size:12px;font-weight:700;min-width:24px;height:24px;display:grid;place-items:center;padding:0 7px;transition:transform .2s}
#order .badge.pop{transform:scale(1.35)}
button.link{font:inherit;font-size:12px;border:0;background:none;color:var(--brown2);cursor:pointer;text-decoration:underline}
.list{overflow-x:hidden;overflow-y:auto;flex:1;min-height:70px;margin:0 -6px;padding:0 6px}
.empty{text-align:center;color:var(--brown2);font-size:13px;line-height:1.7;padding:18px 6px}
.empty b{font-size:30px;display:block;margin-bottom:4px}
.row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line)}
.row.new{animation:rowin .35s ease}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}}
.row .nm b{display:block;font-size:14px}
.row .nm small{color:var(--brown2);font-size:11px}
.qty{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
.qty button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;line-height:1;cursor:pointer;color:var(--brown)}
.qty button:hover{background:var(--caramel);color:#fff;border-color:transparent}
.row .sub{min-width:62px;text-align:right;font-weight:700;font-size:14px}
.pending{font-size:12px;background:#e8f4ec;color:#2d5a43;border-radius:12px;padding:7px 10px;margin-top:8px}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 10px;padding-top:10px;border-top:2px solid var(--line)}
.total span{font-size:14px;color:var(--brown2)}
.total strong{font-size:28px;color:var(--caramel-d)}

/* 服務員對話 */
#bubble{position:fixed;left:0;top:0;pointer-events:none;background:#fff;border-radius:14px;padding:6px 12px;font-size:13px;font-weight:600;box-shadow:0 6px 16px rgba(80,40,20,.2);opacity:0;transition:opacity .25s;white-space:nowrap;transform:translate(-50%,-100%)}
#bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px}
#bubble.on{opacity:1}
#toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:rgba(70,42,26,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:30;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 結帳卡片 */
#overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(80,45,25,.28);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);opacity:0;pointer-events:none;transition:opacity .4s,backdrop-filter .5s,-webkit-backdrop-filter .5s}
#overlay.show{opacity:1;pointer-events:auto;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.receipt-fly{opacity:0;transform:translate(var(--fx,30vw),var(--fy,30vh)) scale(.2) rotate(24deg)}
.receipt-fly.go{animation:fly 1.15s cubic-bezier(.22,.9,.28,1) forwards}
.receipt-fly.out{animation:flyout .4s ease forwards}
@keyframes fly{
  0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.2) rotate(24deg)}
  14%{opacity:1}
  62%{transform:translate(calc(var(--fx)*.12),calc(var(--fy)*.1 - 36px)) scale(1.06) rotate(-6deg)}
  100%{opacity:1;transform:none}
}
@keyframes flyout{to{opacity:0;transform:translateY(40px) scale(.92)}}
.receipt-wrap{filter:drop-shadow(0 24px 40px rgba(60,30,10,.35));transform-origin:center center}
.receipt{position:relative;width:min(400px,92vw);overflow:visible;background:var(--paper);padding:26px 26px 44px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;border-radius:18px 18px 0 0}
.receipt .top{text-align:center;border-bottom:2px dashed var(--line);padding-bottom:14px}
.receipt .top .lg{font-size:34px}
.receipt .top h2{margin:2px 0 0;font-size:22px;letter-spacing:.08em}
.receipt .top small{color:var(--brown2);letter-spacing:.14em;font-size:11px}
.receipt .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--brown2);margin:12px 0}
.receipt table{width:100%;border-collapse:collapse;font-size:14px}
.receipt td{padding:7px 0;vertical-align:top;border-bottom:1px dotted var(--line)}
.receipt td.q{width:40px;color:var(--brown2)}
.receipt td.p{text-align:right;font-weight:700;white-space:nowrap}
.receipt td small{display:block;color:var(--brown2);font-size:11px}
.receipt .sum{margin-top:12px;font-size:14px}
.receipt .sum div{display:flex;justify-content:space-between;padding:3px 0;color:var(--brown2)}
.receipt .sum .big{color:var(--brown);font-size:20px;font-weight:800;padding-top:8px;border-top:2px solid var(--line);margin-top:6px}
.receipt .sum .big b{color:var(--caramel-d);font-size:26px}
.receipt .bar{height:36px;margin:16px 0 4px;background:repeating-linear-gradient(90deg,#4a3224 0 2px,transparent 2px 4px,#4a3224 4px 5px,transparent 5px 9px,#4a3224 9px 12px,transparent 12px 14px);opacity:.75;border-radius:3px}
.receipt .thanks{text-align:center;font-size:13px;color:var(--brown2);margin-bottom:14px}
.stamp{position:absolute;right:14px;top:12px;border:3px solid #d0533b;color:#d0533b;border-radius:10px;padding:2px 9px;font-weight:900;letter-spacing:.12em;font-size:14px;transform:rotate(-14deg);opacity:0;mix-blend-mode:multiply;text-align:center;line-height:1.15}
.stamp small{display:block;font-size:10px;letter-spacing:.2em}
.receipt-fly.go .stamp{animation:stamp .45s 1.05s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{from{opacity:0;transform:rotate(-14deg) scale(2.4)}to{opacity:.9;transform:rotate(-14deg) scale(1)}}

@media (max-width:760px){
  .hint{display:none}
  #info{width:calc(100vw - 24px);left:12px;bottom:auto;top:70px;max-height:48vh;overflow:auto}
  #order{right:12px;left:12px;bottom:12px;width:auto;max-height:38vh}
  .brand{left:12px;top:12px}.tools{right:12px;top:12px}
}

/* 新版識別 */
.version-tag{display:inline-block;margin-left:6px;padding:2px 6px;border:1px solid var(--line);border-radius:5px;font-size:9px;letter-spacing:1px;color:var(--brown2)}

.receipt #done{width:100%}

/* 小島在窄螢幕上保留更多展示空間。 */
@media (max-width:760px){
  #order .empty{padding:5px 6px;font-size:12px;line-height:1.5}
  #order .empty b{display:none}
  #order .total{margin:8px 0;padding-top:8px}
}