/* One committed look: enamel green chrome, cream order-pad paper, signboard red. */
:root{
  --chrome:#15302a; --chrome2:#1d3c34; --chrome3:#27493f; --line:rgba(255,255,255,.1);
  --paper:#f4ecd8; --paper2:#fbf6ea; --ink:#2a221c; --muted:#75695b;
  --red:#c8372d; --red2:#9e1f19; --gold:#f2d27a; --green:#2e9e5b; --amber:#e39b2d;
  --slab:"Zilla Slab", Georgia, serif; --body:Karla, system-ui, sans-serif; --han:"Noto Serif TC", "Songti TC", serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%; margin:0}
body{background:var(--chrome); color:#eef2ee; font:14px/1.45 var(--body)}
button{font:inherit; cursor:pointer}
button:disabled{cursor:not-allowed; opacity:.45}
button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.zh{font-family:var(--han); font-weight:900}
.muted{color:var(--muted); margin:0}
.bad{color:var(--red)} .good{color:var(--green)}

#app{height:100%; display:grid; grid-template-rows:auto auto minmax(560px, 1fr); min-height:820px}
.body{display:grid; grid-template-columns:290px 1fr; min-height:0}
.work{display:grid; grid-template-rows:auto minmax(420px, 1fr); min-width:0; min-height:0}

/* ---------- top bar ---------- */
.topbar{display:flex; align-items:center; gap:28px; padding:10px 18px; background:var(--chrome); border-bottom:1px solid var(--line); flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:6px; background:var(--red2); padding:4px 12px 5px; border-radius:4px; box-shadow:inset 0 0 0 2px var(--gold)}
.brand .zh{font-size:20px; color:var(--gold); letter-spacing:.08em}
.brand .en{font:700 16px var(--slab); color:#fff}
.day{min-width:230px}
.dayline{display:flex; gap:12px; align-items:baseline; font:700 26px/1 var(--slab)}
.dayline span{color:#cfe0d6; font-size:20px; font-variant-numeric:tabular-nums}
.daybar{height:6px; background:var(--chrome3); border-radius:3px; margin-top:4px; overflow:hidden}
.daybar i{display:block; height:100%; background:linear-gradient(90deg, var(--gold), #f29b4b); border-radius:3px}
.stat{display:grid; grid-template-rows:auto 26px; align-content:center; line-height:1.1}
.stat small{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9fb8ad}
.stat b{font:700 22px var(--slab); font-variant-numeric:tabular-nums; display:flex; align-items:center}
#money.neg{color:#ff8b7e}
.pop{display:flex; align-items:center; gap:2px}
.star{position:relative; width:21px; height:21px; background:#3d5a51; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star i{position:absolute; inset:0 auto 0 0; background:var(--gold)}
.popn{font:700 22px var(--slab); margin-left:8px; color:#fff}
.dock{position:absolute; left:14px; bottom:14px; z-index:5; display:flex; gap:14px; align-items:flex-end}
.controls{display:flex; gap:6px}
.controls button{background:rgba(21,48,42,.9); border:1px solid rgba(255,255,255,.18); color:#eef2ee; border-radius:8px; padding:8px 14px; min-width:60px; font-weight:700}
.actions{display:flex; gap:8px}
.actions .act{width:96px}
.act{display:flex; flex-direction:column; align-items:center; line-height:1.15; background:var(--paper); color:var(--ink); border:0; border-radius:8px; padding:7px 8px 8px; font-weight:700; font-size:12px; box-shadow:0 3px 0 #b9ab8c}
.act .zh{font-size:18px; color:var(--red)}
.act.on{background:var(--gold); box-shadow:0 2px 0 #b8952f}
.act.danger .zh{color:var(--red2)}
.act:active{transform:translateY(1px); box-shadow:0 1px 0 #b9ab8c}

/* ---------- ticket rail ---------- */
.rail{display:flex; gap:12px; padding:12px 16px 12px; height:142px; overflow-y:hidden; overflow-x:auto; background:linear-gradient(#1b3830, #16302a); border-bottom:3px solid #7d868d; align-items:flex-start}
.rail-empty{color:#9fb8ad; font-style:italic; align-self:center}
.ticket{flex:0 0 auto; min-width:160px; background:var(--paper2); color:var(--ink); border-radius:2px 2px 6px 6px; padding:6px 8px 7px; box-shadow:0 3px 8px rgba(0,0,0,.35); position:relative; border-top:6px solid #d6cbb0; transform-origin:top center}
.ticket::before{content:""; position:absolute; top:-12px; left:50%; width:10px; height:10px; margin-left:-5px; background:#9aa3ab; border-radius:50%}
.ticket header{display:flex; justify-content:space-between; gap:14px; font:700 17px var(--slab); font-variant-numeric:tabular-nums}
.ticket.late{animation:urgent 1.2s ease-in-out infinite; background:#fff0ea}
@keyframes urgent{50%{box-shadow:0 3px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(200,55,45,.55)}}   /* glows, doesn't move */
.ticket.late header span{color:var(--red)}
.ticket.sent{opacity:.6; background:#e7f6ea}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.2deg)}75%{transform:rotate(1.2deg)}}
@media (prefers-reduced-motion: reduce){ .ticket.late{animation:none} }
.titems{display:flex; gap:4px; margin:4px 0 6px}
.ti{position:relative; display:grid; justify-items:center; width:60px; border-radius:8px; padding:3px 0}
.ti img{width:50px; height:50px}
.ti em{position:absolute; top:0; right:2px; font:700 16px var(--slab); font-style:normal; color:var(--red)}
.ti small{font:700 12px var(--han); color:var(--muted)}
.ti.ready{background:#dff2e3; box-shadow:inset 0 0 0 1.5px var(--green)}
.tbar{height:7px; background:#e6dcc4; border-radius:3px; overflow:hidden}
.tbar i{display:block; height:100%; background:var(--green)}
.ticket.warn .tbar i{background:var(--amber)} .ticket.late .tbar i{background:var(--red)}

/* ---------- main ---------- */
.main{display:grid; grid-template-columns:1fr; min-height:0}
.stage{position:relative; overflow:hidden; background:radial-gradient(ellipse at 45% 40%, #2c4a42, #172a25 75%); min-height:0}
#game{position:absolute; inset:0; display:block; touch-action:none}
.dash{display:grid; grid-template-columns:290px minmax(300px,1fr) minmax(340px,1.3fr); background:var(--paper); color:var(--ink); border-bottom:3px solid #7d868d; max-height:180px}
.dash > .panel{padding:8px 14px 10px; overflow-y:auto; min-width:0}
.dash > .panel + .panel{border-left:1px dashed #cdbf9f}
.panel h2{font:700 13px var(--slab); letter-spacing:.07em; text-transform:uppercase; margin:0 0 8px; display:flex; gap:8px; align-items:baseline; color:#4a4036}
.panel h2 .zh{font-size:16px; color:var(--red); letter-spacing:0}
.cap{font:500 11px var(--body); letter-spacing:0; text-transform:none; color:var(--muted)}
.mini{margin-left:auto; border:0; background:var(--red); color:#fff; border-radius:99px; padding:3px 10px; font:700 11px var(--body); letter-spacing:0; text-transform:none; align-self:center}
.inv{display:grid; grid-template-columns:30px 1fr auto; grid-template-areas:'chip nm qty' 'chip bar bar' 'chip note qo'; gap:4px 10px; align-items:center; padding:9px 0; border-bottom:1px dashed #d6c9ab; font-size:13px}
.inv .chip{grid-area:chip; align-self:start; width:30px; height:30px; font-size:16px !important}
.inv .bar{grid-area:bar; height:7px; margin:0}
.inv .qty{grid-area:qty}
.inv .invnote{grid-area:note; min-height:14px}
.inv .qo{grid-area:qo}
.inv .nm{font-weight:700; white-space:nowrap}
.inv .qty{font:700 15px var(--slab); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.inv .qty small{font:500 11px var(--body); color:var(--muted)}
.inv .invnote{font-size:11px; white-space:nowrap}
.inv.low .qty{color:#b36d10} .inv.out .qty{color:var(--red)}
.chip{width:24px; height:24px; display:grid; place-items:center; border-radius:6px; background:var(--c); color:#fff; font:900 16px var(--han); text-shadow:0 1px 1px rgba(0,0,0,.35); box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.invtop{display:flex; justify-content:space-between; font-weight:700}
.invtop b{font:700 15px var(--slab); font-variant-numeric:tabular-nums}
.invtop b small{font:500 12px var(--body); color:var(--muted)}
.invtop .nm{display:flex; gap:8px; align-items:baseline; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.invtop .invnote{margin:0}
.bar{display:flex; height:5px; background:#e3d8bf; border-radius:3px; overflow:hidden; margin-top:2px}
.bar i{display:block; height:100%; background:var(--green)}
.bar i.incbar{background:repeating-linear-gradient(45deg, #7fb6dd 0 4px, #a9cfea 4px 8px)}
.inv.low .bar i:not(.incbar){background:var(--amber)} .inv.low .invtop b{color:#b36d10}
.inv.out .invtop b{color:var(--red)} .inv.out .chip{filter:grayscale(.6)}
.invnote{font-size:12px; margin-top:2px}
.inc{color:#2d6fa3; font-weight:700} .unl{color:#8a5a3a} .res{color:var(--muted)}
.tray{display:flex; flex-wrap:wrap; gap:4px; min-height:40px}
.trayi{position:relative; width:42px; height:46px; background:#fff; border-radius:6px; box-shadow:inset 0 0 0 1px #e0d4b9}
.trayi img{width:38px; height:38px; margin:1px 2px 0}
.trayi i{position:absolute; left:4px; bottom:3px; height:3px; border-radius:2px; background:var(--green)}
.trayi i.warn{background:var(--amber)} .trayi i.late{background:var(--red)}
.queue{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; max-width:260px}
.qslot{position:relative; aspect-ratio:1; background:#fff; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 2px #e0d4b9; overflow:hidden}
.qslot.empty{color:#c9bc9e; font:700 14px var(--slab); background:transparent; box-shadow:inset 0 0 0 2px dashed}
.qslot.empty{border:2px dashed #d6c9ab; box-shadow:none}
.qslot img{width:78%; height:78%}
.qslot b{position:absolute; top:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font:700 12px var(--slab)}
.qslot.active{box-shadow:inset 0 0 0 3px var(--green)}
.qslot.active b{background:var(--green)}
.qslot > i{position:absolute; left:0; bottom:0; height:4px; background:var(--green)}
.today{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:0}
.today div{background:#fff; border-radius:8px; padding:5px 8px 6px; box-shadow:inset 0 0 0 1px #e6dcc4}
.today dt{color:var(--muted); font-size:10px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .today dd{margin:0; font:700 19px/1.15 var(--slab); font-variant-numeric:tabular-nums}
.today dd.bad{color:var(--red)}
.feed{list-style:none; padding:0; margin:0; display:grid; gap:4px; font-size:12px}
.feed li{display:flex; gap:6px; color:#4a4036}
.feed time{color:var(--muted); font-variant-numeric:tabular-nums}
.feed li.bad{color:#a3261d} .feed li.good{color:#237a45} .feed li.warn{color:#9a5b0c}

/* ---------- overlays in the stage ---------- */
.tip{position:absolute; z-index:5; pointer-events:none; background:var(--paper2); color:var(--ink); border-radius:8px; padding:8px 10px; max-width:240px; box-shadow:0 6px 18px rgba(0,0,0,.4); display:grid; gap:2px; font-size:12px}
.tip b{font:700 14px var(--slab)} .tip .warn{color:var(--red)} .tip .dim{color:var(--muted)}
.toasts{position:absolute; top:12px; left:50%; transform:translateX(-50%); display:grid; gap:6px; z-index:8; pointer-events:none; width:min(460px, 90%)}
.toast{background:rgba(20,30,27,.94); color:#fff; border-left:4px solid #9fb8ad; padding:8px 12px; border-radius:6px; box-shadow:0 6px 16px rgba(0,0,0,.35); transition:opacity .4s, transform .4s}
.toast.good{border-color:#7fe08a} .toast.bad{border-color:#ff6b5b} .toast.warn{border-color:var(--amber)}
.toast.gone{opacity:0; transform:translateY(-6px)}
.banner{position:absolute; right:14px; bottom:14px; z-index:4; background:var(--paper2); color:var(--ink); border-radius:10px; padding:14px 18px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; box-shadow:0 10px 30px rgba(0,0,0,.4); border-top:6px solid var(--red); width:min(400px, calc(100% - 28px))}
.banner h2{font:700 20px var(--slab); margin:2px 0 4px}
.banner ul{margin:0; padding-left:18px} .banner p{margin:0}
.eyebrow{font:700 11px var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:0}
.primary{background:var(--red); color:#fff; border:0; border-radius:8px; padding:9px 16px; font-weight:700; box-shadow:0 3px 0 var(--red2)}
.primary.big{font:700 17px var(--slab); padding:12px 20px; white-space:nowrap}
.primary:active{transform:translateY(1px); box-shadow:0 2px 0 var(--red2)}

.drawer{position:fixed; top:72px; right:12px; bottom:12px; width:min(460px, calc(100% - 20px)); z-index:6; background:var(--paper2); color:var(--ink); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; padding:14px 16px; gap:10px}
.dhead{display:flex; justify-content:space-between; align-items:center}
.dhead h2, .ehead h2{font:700 20px var(--slab); margin:0; display:flex; gap:8px; align-items:baseline}
.dhead h2 .zh, .ehead h2 .zh{color:var(--red)}
.x{background:none; border:0; font-size:26px; line-height:1; color:var(--muted)}
.rrows{overflow-y:auto; display:grid; gap:8px}
.rrow{display:grid; grid-template-columns:34px 1fr auto auto; gap:10px; align-items:center; padding:8px; background:#fff; border-radius:8px; box-shadow:inset 0 0 0 1px #e6dcc4}
.rrow .chip{width:34px; height:34px}
.rname{display:grid} .rname small{color:var(--muted); font-size:12px}
.rstock{display:grid; text-align:right} .rstock small{font-size:11px; color:var(--muted)} .rstock b{font:700 17px var(--slab)} .rstock b small{font:500 12px var(--body)} .rstock .bad{color:var(--red)}
.stepper{display:flex; align-items:center; gap:4px}
.stepper button{width:30px; height:30px; border-radius:50%; border:0; background:var(--paper); font-weight:700; font-size:16px; color:var(--ink)}
.stepper output{min-width:22px; text-align:center; font:700 16px var(--slab)}
.dfoot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; border-top:1px dashed #cdbf9f; padding-top:10px}
.dfoot div{display:grid} .dfoot small{color:var(--muted); font-size:12px} .dfoot b{font:700 22px var(--slab)} .dfoot b.neg{color:var(--red)}

.editor{position:fixed; left:12px; top:72px; bottom:12px; width:min(380px, calc(100% - 24px)); z-index:9; background:var(--paper2); color:var(--ink); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; padding:12px 14px; gap:8px}
.editor.right{left:auto; right:12px}
.ehead{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ehead .cash{margin-left:auto; font:700 18px var(--slab)}
.ehead .paused{font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:#e6dcc4; padding:3px 8px; border-radius:99px; color:#5a4f43}
.selbar{display:flex; gap:8px; align-items:center; background:#fff3cf; border-radius:8px; padding:6px 10px; flex-wrap:wrap}
.selbar span{margin-right:auto}
.selbar button, .filters button{border:0; background:#fff; border-radius:99px; padding:5px 12px; box-shadow:inset 0 0 0 1px #d6c9ab; color:var(--ink)}
.selbar button.danger{color:var(--red)}
kbd{font:700 11px var(--body); background:#fff; border:1px solid #d6c9ab; border-radius:4px; padding:0 4px}
.filters{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.filters button.on{background:var(--ink); color:#fff; box-shadow:none}
.filters .sep{width:1px; height:20px; background:#d6c9ab; margin:0 4px}
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); flex:1; align-content:start; gap:8px; overflow-y:auto; padding-bottom:2px}
.card{display:grid; justify-items:center; text-align:center; gap:2px; background:#fff; border:0; border-radius:10px; padding:8px 6px; box-shadow:inset 0 0 0 1px #e6dcc4, 0 2px 0 #e6dcc4; color:var(--ink)}
.card:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--gold), 0 2px 0 #e6dcc4}
.card img{width:56px; height:56px}
.card b{font:700 13px var(--slab); line-height:1.15}
.card small{font-size:11px; color:var(--muted)}
.card em{font:700 13px var(--slab); font-style:normal; color:var(--red)}
.card.old{border-top:4px solid #2f7a64} .card.simple{border-top:4px solid #d6bf94} .card.modern{border-top:4px solid #1f2a26}
.card.pro{background:#fff8e6}
.card.using{box-shadow:inset 0 0 0 2px var(--green)}
.card.expand{background:#fff3cf}
.dthumb{width:90px; height:72px}
.glyph{display:grid; place-items:center; width:56px; height:56px; font:900 30px var(--han); color:var(--red)}
.thumb{display:block; width:70px; height:44px; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:20; background:rgba(8,16,14,.7); display:grid; place-items:center; padding:16px}
.modal .card{display:block; text-align:left; width:min(620px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--paper2); padding:26px 28px; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); justify-items:initial}
.title .sign{display:inline-block; font:900 26px var(--han); letter-spacing:.2em; color:var(--gold); background:var(--red2); padding:6px 16px; border-radius:4px; box-shadow:inset 0 0 0 3px var(--gold)}
.title h1{font:700 34px var(--slab); margin:14px 0 6px; color:var(--ink)}
.title p{margin:0 0 10px; color:#4a4036; font-size:15px; max-width:60ch}
.how{margin:0 0 16px; padding-left:18px; display:grid; gap:6px; color:#4a4036}
.btns{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.btns button:not(.primary){background:#fff; border:0; border-radius:8px; padding:9px 16px; box-shadow:inset 0 0 0 1px #d6c9ab; font-weight:700; color:var(--ink)}
.summary h2{font:700 26px var(--slab); margin:4px 0 12px; color:var(--ink)}
.summary p{color:#4a4036}
.sumgrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:0 0 12px}
.sumgrid div{background:#fff; border-radius:8px; padding:8px 10px; box-shadow:inset 0 0 0 1px #e6dcc4}
.sumgrid dt{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.sumgrid dd{margin:0; font:700 18px var(--slab); color:var(--ink)}
.warnline{background:#fff3cf; border-radius:8px; padding:8px 10px}
.primary.danger{background:var(--red2)}

@media (max-width: 980px){
  .dash{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); max-height:none}
  .main{grid-template-rows:minmax(420px, 70vh)}
  #app{height:auto}
  .sumgrid{grid-template-columns:repeat(2, 1fr)}
  .banner{flex-direction:column; align-items:stretch}
}

/* ---------- floating controls above a selected item ---------- */
.itembar{position:absolute; z-index:7; transform:translate(-50%, -100%); display:flex; gap:4px; background:var(--paper2); color:var(--ink); padding:5px; border-radius:99px; box-shadow:0 6px 18px rgba(0,0,0,.45); white-space:nowrap}
.itembar::after{content:""; position:absolute; left:50%; bottom:-6px; margin-left:-6px; border:6px solid transparent; border-bottom:0; border-top-color:var(--paper2)}
.itembar b{font:700 12px var(--slab); padding:0 6px 0 8px; align-self:center}
.itembar button{border:0; border-radius:99px; padding:6px 12px; font-weight:700; font-size:12px; background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px #d6c9ab}
.itembar button.rot{background:var(--ink); color:#fff; box-shadow:none}
.itembar button.danger{color:var(--red)}
.itembar kbd{margin-left:4px; background:transparent; border-color:rgba(255,255,255,.5); color:inherit}
body.dragging, body.dragging *{cursor:grabbing !important; user-select:none}
.card[data-buy]{touch-action:none; cursor:grab}
.card .gain{font:700 11px var(--body); color:var(--green)}
.ambline{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px}
.ambline .set{background:#fff; border-radius:99px; padding:2px 8px; box-shadow:inset 0 0 0 1px #d6c9ab}
.ambline .set b{color:var(--green)}
#amb{display:flex; align-items:baseline; gap:6px}
#amb small{font:600 12px var(--han); color:var(--gold); text-transform:none; letter-spacing:0}

.panel h2.sub{margin-top:10px}
.col-cook .queue{grid-template-columns:repeat(5, 40px); max-width:none}
.col-cook .tray{min-height:0}
.feed li{line-height:1.3}
.act:disabled{opacity:.5}

/* pass slots mirror the queue */
.qslot.pass > i{position:absolute; left:0; bottom:0; height:4px}
.qslot.pass > i.ok{background:var(--green)} .qslot.pass > i.warn{background:var(--amber)} .qslot.pass > i.late{background:var(--red)}
.qslot.empty:empty{color:transparent}
.full-note{display:none; color:var(--red); font-weight:700}
#trayHead.full .full-note{display:inline}
.inv .invnote{overflow:hidden; text-overflow:ellipsis}
.ti.part{background:#fff3cf; box-shadow:inset 0 0 0 1.5px var(--amber)}
#amb .of{font:600 13px var(--slab); font-style:normal; color:#9fb8ad; margin-left:1px}

/* targets */
.goals{display:grid; gap:6px}
.target .tl{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; font-weight:700}
.target .tl b{font:700 16px var(--slab)} .target .tl small{font:500 11px var(--body); color:var(--muted)}
.target .bar{height:7px}
.target .bar i{background:linear-gradient(90deg, var(--gold), #e39b2d)}
.target.done .bar i{background:var(--green)}
.goallist{list-style:none; margin:0; padding:0; display:grid; gap:3px; font-size:12px}
.goallist li{display:grid; grid-template-columns:16px 1fr auto; gap:6px; align-items:center}
.goallist .tick{width:14px; height:14px; border-radius:4px; box-shadow:inset 0 0 0 1.5px #bfb193; display:grid; place-items:center}
.goallist li.done .tick{background:var(--green); box-shadow:none}
.goallist li.done .tick::after{content:"✓"; color:#fff; font-size:10px; font-weight:700}
.goallist li.ok .tick{box-shadow:inset 0 0 0 1.5px var(--green)}
.goallist li.fail{color:var(--red)} .goallist li.fail .tick{background:var(--red); box-shadow:none}
.goallist li.fail .tick::after{content:"×"; color:#fff; font-size:11px; font-weight:700}
.goallist em{font-style:normal; font:700 12px var(--slab); color:var(--muted)}
.col-feed .feed li{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bgoals{margin-top:10px; padding-top:10px; border-top:1px dashed #cdbf9f}
.sumgoals{background:#fff; border-radius:10px; padding:10px 12px; margin-bottom:12px; box-shadow:inset 0 0 0 1px #e6dcc4}
.sumgoals h3{margin:0 0 6px; font:700 16px var(--slab); color:var(--ink)}
.sumgoals h3{letter-spacing:.02em} .sumgoals p{margin:6px 0 0}

.qo{display:flex; align-items:baseline; justify-content:center; gap:3px; border:0; border-radius:99px; padding:3px 6px; background:#fff; color:var(--ink); font:700 11px var(--body); box-shadow:inset 0 0 0 1px #d6c9ab}
.qo small{font-weight:500; color:var(--muted); font-size:10px}
.qo:hover:not(:disabled){background:var(--red); color:#fff; box-shadow:none} .qo:hover:not(:disabled) small{color:#ffe1dc}

/* inventory panel on the left */
.invpanel{background:var(--paper); color:var(--ink); border-right:3px solid #7d868d; padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column}
.invpanel > .cap{margin:2px 0 4px}
.invpanel .inv .nm{font-size:14px}
.invpanel .inv .qty{font-size:17px}
.invpanel .wide{margin-top:12px; width:100%; padding:9px; border-radius:8px; border:0; background:var(--red); color:#fff; font-weight:700; box-shadow:0 3px 0 var(--red2)}
@media (max-width: 980px){ .body{grid-template-columns:1fr} .invpanel{border-right:0; border-bottom:3px solid #7d868d} }

.card.locked{opacity:.55; filter:grayscale(.6)} .card.locked em{color:var(--muted)}
.card.fresh{box-shadow:inset 0 0 0 2px var(--gold), 0 2px 0 #e6dcc4}
.levelup{background:#fff3cf; border-radius:10px; padding:10px 12px; margin-bottom:12px; color:var(--ink)}
.levelup b{font:700 17px var(--slab); color:var(--red); margin-right:4px}
#lvl .of{font:600 13px var(--slab); font-style:normal; color:var(--gold); margin-left:8px}

/* the queue/pass column and the inventory panel read as one left-hand column */
.dash{border-bottom:0}
.dash > .panel:not(.col-cook){border-bottom:3px solid #7d868d}
.dash > .col-cook{border-right:3px solid #7d868d}
.dash > .col-cook + .panel{border-left:0}
.invpanel{border-top:1px dashed #cdbf9f}

/* ================= layout v5: everything about the day on the left ================= */
#app{height:100%; min-height:760px; display:grid; grid-template-columns:310px 1fr; grid-template-rows:none}
.side{background:var(--paper); color:var(--ink); border-right:3px solid #7d868d; overflow-y:auto; display:flex; flex-direction:column}
.side > .panel{padding:10px 14px 12px; border-top:1px dashed #cdbf9f}
.sidetop{background:var(--chrome); color:#eef2ee; padding:12px 14px 14px; display:grid; gap:10px}
.sidetop .brand{justify-self:start}
.sidetop .day{min-width:0}
.sidetop .dayline{font-size:26px}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px}
.stats .stat{grid-template-rows:auto 24px}
.stats .stat b{font-size:20px}
.stats .star{width:16px; height:16px}
.stats .popn{font-size:18px; margin-left:6px}
.stats #amb small{font-size:11px}
.side .today{grid-template-columns:repeat(3, 1fr); gap:5px}
.side .today div{padding:4px 7px 5px}
.side .today dd{font-size:17px}
.side .invpanel{border-right:0; border-top:1px dashed #cdbf9f; overflow:visible; flex:1}
.side .invpanel .inv{padding:7px 0}

.work{display:grid; grid-template-rows:auto auto minmax(420px, 1fr); min-width:0; min-height:0}
.cookbar{display:grid; grid-template-columns:auto auto 1fr; background:var(--paper); color:var(--ink); border-bottom:3px solid #7d868d}
.cookbar > .panel{padding:10px 18px 12px}
.cookbar > .panel + .panel{border-left:1px dashed #cdbf9f}
.cookbar .queue{grid-template-columns:repeat(5, 44px); gap:8px; max-width:none}
.cookbar .col-feed .feed{margin-top:4px; font-size:13px}

.controls{position:absolute; left:14px; bottom:14px; z-index:5}
.actions{position:absolute; right:14px; bottom:14px; z-index:5}
.banner{right:auto; bottom:auto; left:14px; top:14px}
.editor{top:12px}
.drawer{top:12px}
.qslot.pass b{background:var(--ink)}
@media (max-width: 980px){ #app{grid-template-columns:1fr; height:auto} .side{border-right:0} .cookbar{grid-template-columns:1fr 1fr} }

.side .invpanel .inv{grid-template-areas:'chip nm qty' 'chip bar qo' 'chip note note'; padding:6px 0; row-gap:3px}
.side .invpanel .inv .invnote:empty{display:none}
.side .invpanel .inv .qo{padding:2px 6px}
.side .invpanel .wide{margin-top:8px}

/* the before-opening banner lives in the (empty) ticket rail */
.railwrap{position:relative}
.railwrap .banner{position:absolute; inset:10px 16px; left:16px; top:10px; right:16px; bottom:12px; width:auto; z-index:3;
  flex-direction:row; align-items:center; gap:22px; padding:10px 18px; border-top:0; border-left:6px solid var(--red); box-shadow:0 6px 18px rgba(0,0,0,.35)}
.railwrap .banner .bmain{flex:1.3; min-width:0}
.railwrap .banner h2{font-size:18px; margin:2px 0 3px}
.railwrap .banner ul{font-size:13px; line-height:1.35}
.railwrap .banner .bgoals{flex:1; margin:0; padding:0 0 0 18px; border-top:0; border-left:1px dashed #cdbf9f; align-self:stretch; display:flex; flex-direction:column; justify-content:center}

/* ================= layout v6 tweaks ================= */
:root{ --cookbar-h:118px; --rail-h:142px; }
.cookbar{height:var(--cookbar-h); box-sizing:content-box}
.cookbar > .panel{padding:10px 22px 12px; display:flex; flex-direction:column; justify-content:center}
.cookbar .queue{grid-template-columns:repeat(5, 58px); gap:10px}
.cookbar .qslot b{width:22px; height:22px; font-size:13px}
.rail{height:var(--rail-h); box-sizing:border-box}
.railwrap{height:var(--rail-h)}
/* the green block ends where the ticket rail ends (cook bar + its 3px border + rail) */
.sidetop{box-sizing:border-box; height:calc(var(--cookbar-h) + 3px + var(--rail-h)); align-content:start}

/* inventory: + button sits on the count line, counts are bigger */
.side .invpanel .inv{grid-template-columns:30px 1fr auto auto; grid-template-areas:'chip nm qty qo' 'chip bar bar bar' 'chip note note note'; column-gap:8px}
.side .invpanel .inv .qty{font-size:21px; line-height:1}
.side .invpanel .inv .qty small{font-size:12px}
.side .invpanel .inv .bar{height:8px}

.sidetop{flex-shrink:0}
.side > .panel{flex-shrink:0}
.side .invpanel .inv{padding:4px 0}
.side > .panel{padding-top:8px; padding-bottom:10px}

/* ================= opening screen ================= */
.splash{position:fixed; inset:0; z-index:100; overflow:hidden; cursor:pointer; background:#090d24;
  transition:transform 1.05s cubic-bezier(.6,.05,.3,1)}
.splash.opening{transform:translateY(-100%)}
.splash-city{position:absolute; inset:0; width:100%; height:100%}
.neon{position:absolute; font:900 5vh/1 var(--han); color:#fff; padding:.25em .35em; border:3px solid var(--c); border-radius:.2em;
  text-shadow:0 0 4px #fff, 0 0 12px var(--c), 0 0 26px var(--c), 0 0 44px var(--c);
  box-shadow:0 0 10px var(--c), inset 0 0 10px var(--c); background:rgba(10,8,25,.55);
  animation:flicker 6s infinite steps(1)}
.neon.vert{writing-mode:vertical-rl; letter-spacing:.12em}
@keyframes flicker{0%,19%,21%,62%,64%,100%{opacity:1} 20%,63%{opacity:.35} 63.5%{opacity:.8}}
.splash-title{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; width:min(760px, 92vw)}
.neon-board{display:inline-block; padding:.12em .5em .18em; background:#7a1410; border:6px solid #f2d27a; border-radius:10px;
  box-shadow:0 0 0 4px #7a1410, 0 0 40px rgba(255,90,60,.55), inset 0 0 18px rgba(0,0,0,.4)}
.neon-board .zh{font-size:clamp(56px, 13vh, 140px); color:#ffe9a8; letter-spacing:.14em; margin-right:-.14em;
  text-shadow:0 0 6px #fff3c4, 0 0 22px #ffb347, 0 0 48px #ff6a2a}
.rush{font:700 clamp(40px, 9vh, 96px)/1 var(--slab); color:#fff; letter-spacing:.35em; margin:.25em -.35em 0 0;
  text-shadow:0 0 6px #fff, 0 0 18px #5ad1ff, 0 0 40px #5ad1ff, 0 0 70px #2a8cff}
.tag{margin:18px auto 0; color:#f4ecd8; font-size:16px; text-shadow:0 2px 6px rgba(0,0,0,.8)}
.tag span{display:block; font:700 22px var(--han); color:#ffd23f; margin-bottom:4px; letter-spacing:.1em}
.splash-go{position:absolute; left:50%; bottom:6vh; transform:translateX(-50%); background:rgba(10,8,25,.7); color:#fff; border:2px solid #ff5fa2;
  border-radius:99px; padding:12px 22px; font:700 16px var(--body); box-shadow:0 0 18px rgba(255,95,162,.6); animation:pulse 1.6s ease-in-out infinite}
.splash-go .zh{color:#ffd23f; margin-right:6px}
@keyframes pulse{50%{box-shadow:0 0 34px rgba(255,95,162,.9); transform:translateX(-50%) scale(1.04)}}
/* the bottom of the splash is a roller shutter, so pulling it up reads as opening the shop */
.shutter-edge{position:absolute; left:0; right:0; bottom:0; height:0; transition:height .3s}
.splash.opening .shutter-edge{height:40vh; background:repeating-linear-gradient(0deg, #8f969d 0 10px, #6f767d 10px 13px, #a9b0b6 13px 22px);
  box-shadow:inset 0 10px 20px rgba(0,0,0,.35)}
@media (prefers-reduced-motion: reduce){ .neon, .splash-go{animation:none} .splash{transition:none} }
.neon-board{white-space:nowrap}
.tag{display:inline-block; background:rgba(9,13,36,.72); padding:10px 18px; border-radius:12px}

/* ================= v7 polish ================= */
/* section headings: one size and colour everywhere (queue, pass, latest, today, targets, inventory) */
.side .panel h2, .cookbar .panel h2, .invpanel h2{font:700 13px var(--slab); letter-spacing:.07em; margin:0 0 8px}
.side .panel h2 .zh, .cookbar .panel h2 .zh, .invpanel h2 .zh{font-size:16px}
.side > .cap, .invpanel > .cap{font:500 11px var(--body); color:var(--muted); margin:-4px 0 4px}
.cookbar > .panel{justify-content:flex-start}
.cookbar > .col-feed .feed{margin-top:0}

/* stock counts: regular weight */
.side .invpanel .inv .qty{font:500 20px/1 var(--body); font-variant-numeric:tabular-nums}
.side .invpanel .inv .qty small{font:400 12px var(--body)}

/* the green block: brand + tour button, a big day line with a real progress bar, then four stat tiles */
.sidetop{display:flex; flex-direction:column; gap:12px; padding:14px 14px 14px}
.sidetop .brandrow{display:flex; align-items:center; justify-content:space-between}
.sidetop .brand .zh{font-size:22px} .sidetop .brand .en{font-size:17px}
.tourbtn{background:transparent; border:1.5px solid rgba(255,255,255,.35); color:#dfe9e3; border-radius:99px; padding:4px 11px; font:700 12px var(--body)}
.tourbtn:hover{border-color:var(--gold); color:var(--gold)}
.sidetop .dayline{justify-content:space-between; font-size:30px}
.sidetop .dayline span{font-size:21px}
.sidetop .daybar{height:9px; margin-top:7px; border-radius:5px}
.sidetop .dayends{display:flex; justify-content:space-between; font:600 10px var(--body); letter-spacing:.06em; color:#8fa99e; margin-top:3px}
.stats{flex:1; grid-template-rows:1fr 1fr; gap:8px}
.stats .stat{background:rgba(255,255,255,.06); border-radius:9px; padding:7px 10px; align-content:center; grid-template-rows:auto 26px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.stats .stat small{font-size:10px}

/* bigger Open button */
.railwrap .banner .primary.big{font:700 22px var(--slab); padding:18px 30px; border-radius:12px; box-shadow:0 5px 0 var(--red2)}

/* ================= walkthrough ================= */
.tour{position:fixed; inset:0; z-index:90}
.tour-hole{position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(6,14,12,.72), 0 0 0 3px var(--gold), 0 0 24px 6px rgba(242,210,122,.45);
  transition:left .35s ease, top .35s ease, width .35s ease, height .35s ease; pointer-events:none}
.tour-card{position:fixed; width:340px; background:var(--paper2); color:var(--ink); border-radius:14px; padding:16px 18px 14px; box-shadow:0 16px 40px rgba(0,0,0,.5);
  border-top:6px solid var(--red); transition:left .35s ease, top .35s ease}
.tour-card h3{font:700 20px var(--slab); margin:2px 0 6px}
.tour-card p{margin:0; font-size:14px; line-height:1.5; color:#4a4036}
.tour-card .tour-step{font:700 11px var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:2px}
.tour-btns{display:flex; gap:8px; justify-content:flex-end; margin-top:14px}
.tour-btns button:not(.primary){background:#fff; border:0; border-radius:8px; padding:8px 14px; box-shadow:inset 0 0 0 1px #d6c9ab; font-weight:700; color:var(--ink)}
.tour-btns .tour-skip{margin-right:auto; box-shadow:none !important; background:transparent !important; color:var(--muted) !important; font-weight:500 !important; padding-left:0 !important}
@media (prefers-reduced-motion: reduce){ .tour-hole, .tour-card{transition:none} }

/* soft vignette over the restaurant */
.stage::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(5,12,10,.45) 100%)}

/* zoom controls, just above pause / speed */
.zoomer{position:absolute; left:14px; bottom:62px; z-index:5; display:flex; gap:6px}
.zoomer button{background:rgba(21,48,42,.9); border:1px solid rgba(255,255,255,.18); color:#eef2ee; border-radius:8px; padding:7px 12px; font-weight:700; min-width:38px}
.zoomer button:hover{border-color:var(--gold)}
#game.panning{cursor:grabbing !important}

/* compact inventory: two tiles per row once the list gets long */
#inv.compact{display:grid; grid-template-columns:1fr 1fr; gap:6px}
#inv.compact .inv{grid-template-columns:22px 1fr auto; grid-template-areas:'chip nm nm' 'chip qty qo' 'bar bar bar' 'note note note';
  background:#fff; border-radius:8px; padding:5px 7px; border-bottom:0; box-shadow:inset 0 0 0 1px #e6dcc4; row-gap:2px; column-gap:6px}
#inv.compact .inv .chip{width:22px; height:22px; font-size:12px !important}
#inv.compact .inv .nm{font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#inv.compact .inv .qty{font-size:15px; text-align:left}
#inv.compact .inv .qty small{font-size:10px}
#inv.compact .inv .qo{padding:1px 5px; font-size:10px} #inv.compact .inv .qo small{display:none}
#inv.compact .inv .bar{height:5px}
#inv.compact .inv .invnote{font-size:10px}
.card.premium{background:linear-gradient(#fffaf0, #fff3cf)} .card.premium b::after{content:" ★"; color:var(--gold)}
.relax{display:flex; gap:6px; align-items:flex-start; font-size:12px; margin-top:6px; color:var(--ink)}
.brandbtns{display:flex; gap:6px}
/* brand row: keep the name on one line next to the two small buttons */
.sidetop .brandrow{gap:8px}
.sidetop .brand{white-space:nowrap; padding:3px 9px 4px}
.sidetop .brand .zh{font-size:18px} .sidetop .brand .en{font-size:14px}
.brandbtns{flex-wrap:nowrap}
.brandbtns .tourbtn{padding:3px 8px; font-size:11px; white-space:nowrap}
/* compact inventory, roomier: bigger tiles, names wrap instead of being cut off */
#inv.compact{gap:8px}
#inv.compact .inv{grid-template-columns:28px 1fr; grid-template-areas:'chip nm' 'qty qty' 'bar bar' 'note qo'; padding:9px 10px 10px; row-gap:6px; column-gap:8px; align-items:center}
#inv.compact .inv .chip{width:28px; height:28px; font-size:15px !important; align-self:center}
#inv.compact .inv .nm{font-size:13px; line-height:1.2; white-space:normal; overflow:visible; text-overflow:clip}
#inv.compact .inv .qty{font-size:20px}
#inv.compact .inv .qty small{font-size:12px}
#inv.compact .inv .bar{height:7px}
#inv.compact .inv .invnote{font-size:11px; white-space:normal; line-height:1.2}
#inv.compact .inv .qo{justify-self:end; padding:3px 8px; font-size:11px}
#inv.compact .inv .qo small{display:inline}
#inv.compact .inv .invnote:empty{display:block}
#inv.compact .inv{grid-template-columns:28px 1fr auto; grid-template-areas:'chip nm nm' 'qty qty qo' 'bar bar bar' 'note note note'}
#inv.compact .inv .invnote:empty{display:none}

/* ================= learning mode ================= */
.tourbtn.on{border-color:var(--gold); color:var(--gold)}
.ti.learn{width:auto; min-width:60px; padding:3px 6px 4px}
.ti.learn img{width:36px; height:36px}
.ti.learn .lzh{font:900 17px/1.1 var(--han); color:var(--ink)}
.ti.learn .ljp{font:600 10px var(--body); color:#2d6fa3; white-space:nowrap}
.ti.learn:hover .ljp{opacity:1 !important}
.ti.learn.known .lzh{font-size:22px; padding-top:6px}
.ticket.reading{box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 0 0 2px var(--gold)}
.learnopt{display:flex; gap:8px; align-items:flex-start; margin:0 0 14px; padding:10px 12px; background:#fff; border-radius:10px; box-shadow:inset 0 0 0 1px #e6dcc4; color:#4a4036; font-size:14px}
.learnopt input{margin-top:3px}
.games{margin:14px 0 0; font-size:13px; color:var(--muted)} .games a{color:var(--red); font-weight:700; margin-left:6px}
.wtable{width:100%; border-collapse:collapse; margin-bottom:14px; font-size:14px; color:var(--ink)}
.wtable th{text-align:left; font:700 11px var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:4px 8px}
.wtable td{padding:6px 8px; border-top:1px dashed #e0d4b9; vertical-align:middle}
.wtable .wzh{font:900 20px var(--han)} .wtable .wjp{color:#2d6fa3; font-weight:600}
.wtable .wbar{width:150px} .wtable .wbar small{color:var(--muted); font-size:11px}
.wtable tr.known .wzh::after{content:" ★"; color:var(--gold); font-size:14px}
.ti.learn{display:grid; grid-template-rows:auto auto auto; justify-items:center; row-gap:1px}
.ti.learn img{width:30px; height:30px}
.ti.learn .lzh{font-size:16px}
.ti.learn em{position:static; order:-1; justify-self:end; font-size:13px; line-height:1; margin-bottom:-4px}
.ti.learn.known .lzh{font-size:20px; padding-top:2px}
.card.banquet{border-top:4px solid #b3261e} .card.teahouse{border-top:4px solid #9a6a3e}

/* ================= v8: wider side, readable slots, bin, boosters ================= */
#app{grid-template-columns:360px 1fr; grid-template-rows:minmax(0, 1fr)}
.side{min-height:0}
.qslot{overflow:visible}
.qslot img{border-radius:50%}
.qslot b{top:-6px; right:-6px; z-index:2; box-shadow:0 0 0 2px var(--paper)}
.qslot > i, .qslot > i.fresh{position:absolute; left:4px; right:auto; bottom:-8px; height:5px; border-radius:3px; z-index:1}
.qslot.active::after, .qslot.pass::after{content:""; position:absolute; left:4px; right:4px; bottom:-8px; height:5px; border-radius:3px; background:#e3d8bf}
.qslot > i{max-width:calc(100% - 8px)}
button.qslot{border:0; padding:0; background:#fff; cursor:pointer; font:inherit}
.qslot .bin{position:absolute; inset:0; display:none; place-items:center; border-radius:50%; background:rgba(200,55,45,.82); color:#fff; font:700 22px/1 var(--body)}
.qslot.pass:hover .bin, .qslot.job:hover .bin{display:grid}
.cookbar{grid-template-columns:auto auto auto 1fr}
.boosts{display:grid; gap:6px}
.boost{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; border:0; border-radius:10px; padding:5px 10px; background:#fff; box-shadow:inset 0 0 0 1px #d6c9ab; color:var(--ink); text-align:left; overflow:hidden; min-width:190px}
.boost .bzh{font:900 16px var(--han); color:var(--red)}
.boost .bname{font:600 12px var(--body)} .boost em{font:700 13px var(--slab); font-style:normal; color:var(--red)}
.boost:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--gold)}
.boost.on{background:#fff3cf; box-shadow:inset 0 0 0 2px var(--gold)} .boost.on em{color:#8a6a10}
.boost > i{position:absolute; left:0; bottom:0; height:3px; background:var(--gold)}
.boost:disabled:not(.on){opacity:.5}
.cookbar .queue{grid-template-columns:repeat(5, 48px); gap:9px}
.cookbar > .panel{padding:10px 16px 12px}
.boost{min-width:176px}
.col-feed{min-width:150px}
.col-feed h2{white-space:nowrap}
/* inventory: more breathing room now that the side panel scrolls on its own */
.side .invpanel .inv{padding:10px 0; row-gap:6px}
.side .invpanel .inv .nm{font-size:14.5px}
.side .invpanel .inv .qty{font-size:22px}
.side .invpanel .inv .bar{height:9px}
.side .invpanel .inv .qo{padding:4px 9px}
#inv.compact{gap:10px}
#inv.compact .inv{padding:12px 11px 13px; row-gap:8px}
/* two inventory columns that always fit: share the width instead of sizing to their widest content */
#app{grid-template-columns:390px 1fr}
#inv.compact{grid-template-columns:repeat(2, minmax(0, 1fr))}
#inv.compact .inv{min-width:0}
#inv.compact .inv .qty{white-space:nowrap}
.side{overflow-x:hidden}
#inv.compact .inv .qo small{display:none}
#inv.compact .inv .qo{padding:3px 9px}

/* the left panel can be dragged wider or narrower (width kept per browser) */
:root{--side-w:390px}
#app{grid-template-columns:var(--side-w) 1fr; position:relative}
.side-resizer{position:fixed; top:0; bottom:0; left:calc(var(--side-w) - 4px); width:9px; z-index:8; cursor:col-resize; touch-action:none}
.side-resizer::after{content:""; position:absolute; top:50%; left:3px; width:3px; height:48px; margin-top:-24px; border-radius:2px; background:rgba(125,134,141,.55); transition:background .15s}
.side-resizer:hover::after, .side-resizer.dragging::after, .side-resizer:focus-visible::after{background:var(--gold)}
.side-resizer:focus-visible{outline:none}
body.resizing, body.resizing *{cursor:col-resize !important; user-select:none}

/* the stage is sized by the window, never by what's in the strip above it
   (a longer feed line or the "pass full" note used to widen the whole column and rescale the shop) */
.work{grid-template-columns:minmax(0, 1fr)}
.work > *{min-width:0}
.cookbar{overflow:hidden}
.col-feed{min-width:0; overflow:hidden}
/* a delivery lights up its inventory row for a moment instead of popping up over the shop */
.arr{color:#237a45; font-weight:700}
.inv.arrived{background:#e3f4e5; border-radius:8px}

/* the piece being dragged, under the pointer until it reaches the room */
.dragpreview{position:fixed; z-index:30; width:90px; height:72px; margin:-36px 0 0 -45px; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); opacity:.92}
.dragpreview[hidden]{display:none}

/* the ticket rail never scrolls: tickets that don't fit run off the end, like a real rail */
.rail{overflow:hidden}