/* Sim kit shell. Theme colours come from CSS variables set by the game's own style.css. */
:root{--ink:#3b302b;--paper:#fbf4e4;--paper2:#f2e6cc;--card:#fffaf0;--accent:#c8493a;--accent2:#f0913a;--good:#4d9a4a;--bad:#d9483b;--gold:#f2b632;--line:#e3d3b2;--shadow:0 3px 0 rgba(59,48,43,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:"Baloo 2","Nunito",system-ui,"Noto Sans",sans-serif;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:not-allowed}
.ic svg,svg.ic{width:100%;height:100%;display:block}
.sim button{touch-action:manipulation}
.scene .rain{animation:rain .7s linear infinite}@keyframes rain{from{transform:translateY(-6px);opacity:0}30%{opacity:1}to{transform:translateY(52px);opacity:0}}
.chip{display:inline-flex;align-items:center;gap:3px;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:1px 6px 1px 3px;font-size:11.5px;font-weight:700;line-height:1;min-height:24px}
.chip .ic{position:relative;width:20px;height:20px;display:inline-block}.chip .ic em{position:absolute;right:-3px;bottom:-4px;font-size:9px;font-style:normal;background:var(--ink);color:#fff;border-radius:6px;padding:0 3px}
.chip i{font-style:normal;font-size:11px}.chip.done{opacity:.45;text-decoration:line-through}.chip.cur{border-color:var(--accent);background:#fff1d8;box-shadow:0 0 0 2px rgba(200,73,58,.18)}
.g-pat{position:absolute;left:8px;bottom:-2%;width:26%;height:9px;border-radius:6px;background:rgba(255,255,255,.7);border:2px solid var(--ink);overflow:hidden;z-index:4}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;align-content:start}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 3px 4px;border-radius:14px;background:#fff;border:2px solid var(--line);box-shadow:0 2px 0 var(--line);transition:transform .08s;min-height:74px}
.tile:active{transform:translateY(2px);box-shadow:none}.tile-art{width:44px;height:44px}.tile-name{font-size:11.5px;font-weight:800;line-height:1.05;text-align:center;word-break:break-word}
.tile-stock{position:absolute;right:-4px;top:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.tile.out{opacity:.55}.tile.out .tile-stock{background:var(--bad)}.tile.picked{border-color:var(--good);background:#f0fbe9}
.tile.hint{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,182,50,.45),0 2px 0 var(--line);animation:pulse 1s infinite}
.tile.shake,.shake{animation:oops .3s}.tiles.locked{pointer-events:none}.hint-line{font-size:11.5px;opacity:.6;text-align:center;margin-top:6px}
.fplus{position:absolute;pointer-events:none;font-weight:800;color:var(--good);animation:fup .7s ease-out forwards;font-size:18px}
/* widgets */
.pour{display:flex;gap:14px;align-items:stretch;justify-content:center;flex:1;min-height:150px}
.pour-gauge{position:relative;width:64px;border:3px solid var(--ink);border-radius:14px;background:#f6efe0;overflow:hidden;flex:none}.pour-fill{position:absolute;left:0;right:0;bottom:0;height:0}.pour-band{position:absolute;left:0;right:0;background:rgba(77,154,74,.35);border-top:2px dashed var(--good);border-bottom:2px dashed var(--good)}.pour-line{position:absolute;left:0;right:0;height:3px;background:var(--good)}
.pour-gauge.perfect{box-shadow:0 0 0 4px var(--gold)}.pour-gauge.over,.pour-gauge.under{box-shadow:0 0 0 4px var(--bad)}
.pour-side{display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:stretch;min-width:120px}.pour-side small{font-size:11px;opacity:.6;text-align:center;line-height:1.1}
.pour-btn{background:var(--accent);color:#fff;font-weight:800;font-size:18px;border:2.5px solid var(--ink);border-radius:16px;padding:16px 10px;box-shadow:0 4px 0 var(--ink);touch-action:none;user-select:none}.pour-btn.on{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.heat,.rhythm,.scrub,.dial,.trace{display:flex;flex-direction:column;gap:12px;flex:1;justify-content:center;min-height:130px}
.heat-bar,.rhythm-lane,.scrub-bar{position:relative;height:34px;border:3px solid var(--ink);border-radius:17px;background:linear-gradient(90deg,#8ecbf0,#f6e39a 55%,#f0813a 85%,#7a3b22);overflow:hidden}
.heat-band{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.55);border-left:3px solid #fff;border-right:3px solid #fff}.heat-needle{position:absolute;top:-2px;bottom:-2px;width:5px;background:var(--ink);border-radius:3px;left:0}
.heat-bar.perfect{box-shadow:0 0 0 4px var(--gold)}.heat-bar.over,.heat-bar.under{box-shadow:0 0 0 4px var(--bad)}.heat-target{text-align:center;font-weight:800;font-size:15px}
.rhythm-lane{background:#efe3c6}.rhythm-zone{position:absolute;left:41%;width:18%;top:0;bottom:0;background:rgba(77,154,74,.4);border-left:3px solid var(--good);border-right:3px solid var(--good)}.rhythm-dot{position:absolute;top:4px;width:22px;height:22px;border-radius:50%;background:var(--accent);border:2.5px solid var(--ink);margin-left:-11px}
.rhythm-pips{display:flex;gap:8px;justify-content:center}.rhythm-pips i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--ink);background:#eee}.rhythm-pips i.perfect{background:var(--gold)}.rhythm-pips i.ok{background:#8fd28a}.rhythm-pips i.miss{background:var(--bad)}
.scrub-pad{flex:1;min-height:100px;border:3px dashed var(--ink);border-radius:18px;background:repeating-linear-gradient(45deg,#f3e8cc,#f3e8cc 10px,#efe0b9 10px,#efe0b9 20px);display:grid;place-items:center;font-weight:800;touch-action:none}.scrub-bar{height:16px;background:#eadfc3}.scrub-bar i{display:block;height:100%;width:0;background:var(--good)}
.dial-val{font-size:30px;font-weight:800;text-align:center}.dial input[type=range]{width:100%;height:36px;accent-color:var(--accent)}.dial-ticks{display:flex;justify-content:space-between;font-size:12px;font-weight:800;opacity:.8}.dial-ticks .hint{color:var(--accent);opacity:1}
.trace-cv{width:100%;flex:1;min-height:130px;border:3px solid var(--ink);border-radius:16px;background:#fffdf6;touch-action:none}
/* generic button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:14px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--shadow);font-weight:800;font-size:14px;min-height:42px}.btn.primary{background:var(--accent);color:#fff}.btn.big{font-size:18px;min-height:52px;padding:10px 20px}.btn.small{padding:5px 10px;min-height:34px;font-size:13px}.btn:active{transform:translateY(2px);box-shadow:none}.btn:disabled{opacity:.5}
.btn .ic{width:26px;height:26px;display:inline-block}
/* toasts, floats, banner */
.toasts{position:absolute;left:50%;top:calc(58px + env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:30;width:min(92vw,460px);pointer-events:none}
.toast{background:var(--ink);color:#fff8e8;padding:8px 12px;border-radius:14px;font-size:13.5px;font-weight:700;text-align:center;animation:fdown .25s;box-shadow:0 3px 0 rgba(0,0,0,.25)}.toast.bad{background:var(--bad)}.toast.out{opacity:0;transition:.3s}
.floats{position:absolute;inset:0;pointer-events:none;z-index:29;overflow:hidden}.float{position:absolute;transform:translateX(-50%);font-weight:800;font-size:19px;color:var(--good);text-shadow:0 2px 0 #fff,0 -2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff;animation:fup 1.1s ease-out forwards;white-space:nowrap}.float.bad{color:var(--bad)}.float.gold{color:#d18a00;font-size:22px}.float.perfect{color:#b35bd0;font-size:22px}
.banner{position:absolute;left:0;right:0;top:32%;z-index:31;display:grid;place-items:center;pointer-events:none;opacity:0}.banner div{background:var(--gold);border:3px solid var(--ink);border-radius:20px;padding:10px 26px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column}.banner b{font-size:26px}.banner small{font-size:13px;font-weight:700}.banner.show{animation:banner 2.4s ease-out}
/* sheets */
.sheet-host{position:absolute;inset:0;z-index:40;display:none}.sheet-host.on{display:flex;align-items:flex-end;justify-content:center}
.veil{position:absolute;inset:0;background:rgba(40,28,20,.55)}
.sheet{position:relative;display:flex;flex-direction:column;width:min(100%,560px);max-height:94dvh;background:var(--paper);border:3px solid var(--ink);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -6px 0 rgba(0,0,0,.15);animation:up .28s ease-out;overflow:hidden}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px 6px;gap:10px}.sheet-head h2{margin:0;font-size:22px;line-height:1.05}.sheet-head p{margin:2px 0 0;font-size:13px;opacity:.7}.x{width:36px;height:36px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;font-weight:800}
.sheet-body{padding:6px 14px 12px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}
.sheet-foot{display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:2px solid var(--line);background:#f4e8cc;flex-wrap:wrap;justify-content:flex-end}.sheet-foot .big{flex:1 1 100%}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 12px}.card.warn{background:#fff0e0;border-color:var(--accent2)}.card.note{background:#eef8e6;border-color:#bfe0a8;font-size:14px}
.card.forecast{display:flex;justify-content:space-between;align-items:center;gap:8px}.forecast small{display:block;opacity:.6}.forecast b{font-size:18px}
.card.chapter{background:linear-gradient(#fff5d6,#ffe9a8);border-color:var(--gold)}.chapter h3{margin:2px 0}.chapter p{margin:0;font-size:14px}.chapter small{font-weight:800;opacity:.6}
.incident{display:flex;gap:10px;background:#fff3e0;border-color:var(--accent2)}.incident h3{margin:0 0 2px}.incident p{margin:0 0 8px;font-size:14px}.inc-who{width:64px;flex:none}.inc-who svg{width:100%}.inc-btns{display:flex;gap:8px;flex-wrap:wrap}.incident.done{background:#eef8e6;border-color:#bfe0a8}
.market{display:flex;flex-direction:column;gap:6px}.mk{display:grid;grid-template-columns:40px 1fr auto auto;gap:8px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:14px;padding:5px 8px}.mk.low{border-color:var(--accent2);background:#fff6ea}.mk-art{width:38px;height:38px}.mk-name{font-weight:800;font-size:14px;line-height:1.05}.mk-name small{display:block;font-weight:600;opacity:.6;font-size:11px}.mk-have{font-weight:800;text-align:right}.mk-have small{opacity:.6}
.profit{text-align:center}.profit small{opacity:.6;display:block}.profit b{font-size:38px;line-height:1}.profit.up b{color:var(--good)}.profit.down b{color:var(--bad)}.spark{display:flex;gap:4px;height:34px;align-items:flex-end;justify-content:center;margin-top:6px}.spark i{width:14px;background:var(--good);border-radius:3px}.spark i.neg{background:var(--bad)}
.rows{display:flex;flex-direction:column;gap:3px}.sum-row{display:flex;justify-content:space-between;font-size:14px}.sum-row.neg b{color:var(--bad)}.sum-row.total{border-top:2px solid var(--line);padding-top:5px;margin-top:3px;font-size:16px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}.stats b{font-size:22px;display:block}.stats small{font-size:11px;opacity:.65}.lvl{display:flex;flex-direction:column;gap:4px}.lvl>div:first-child{display:flex;justify-content:space-between}.lvl small{opacity:.65}
.tease{text-align:center;font-weight:700;background:#eef4ff;border-color:#c5d6f2}.reviews h3{margin:0 0 4px}.rev{padding:6px 0;border-top:1px dashed var(--line)}.rev:first-of-type{border-top:0}.rev b{font-size:13px}.rev .stars{margin-left:6px;color:#e0a000;font-size:13px;letter-spacing:1px}.rev .stars.s1,.rev .stars.s2{color:var(--bad)}.rev p{margin:2px 0 0;font-size:13.5px}
.sec{margin:8px 0 2px;font-size:15px;opacity:.7}
.up{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:14px;padding:6px 8px}.up.locked{opacity:.55}.up.owned{background:#f0fbe9;border-color:#bfe0a8}.up-ico{width:40px;height:40px}.up-txt b{display:block;font-size:14px;line-height:1.05}.up-txt small{font-size:12px;opacity:.65;line-height:1.1;display:block}.tag{font-size:12px;font-weight:800;background:var(--paper2);border-radius:10px;padding:3px 8px}.tag.lock{opacity:.7}
.crew{display:grid;grid-template-columns:56px 1fr auto;gap:8px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:14px;padding:6px 8px}.crew.off{opacity:.55}.crew.rest{opacity:.8}.crew-face{width:52px;height:56px}.crew-face svg{width:100%;height:100%}.crew b{display:block}.crew small{opacity:.65;font-size:12px}.crew-btns{display:flex;flex-direction:column;gap:4px}
.regs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.reg{background:#fff;border:2px solid var(--line);border-radius:14px;padding:6px;text-align:center}.reg.unknown{opacity:.5;filter:grayscale(1)}.reg-face{width:60px;height:64px;margin:0 auto}.reg-face svg{width:100%;height:100%}.reg b{display:block;font-size:13px}.reg small{display:block;font-size:11px;opacity:.65;line-height:1.1}.reg .usual{color:var(--accent);opacity:1}
.setting{display:flex;justify-content:space-between;align-items:center;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:700;text-align:left;width:100%}.setting b{background:var(--paper2);border-radius:10px;padding:2px 10px}.setting[aria-pressed=true] b{background:var(--good);color:#fff}.setting.danger{color:var(--bad)}.setting select{font:inherit;padding:6px;border-radius:10px;border:2px solid var(--ink);background:#fff;max-width:55%}
.intro{align-items:center;text-align:center;padding:18px 18px 24px}.intro-duo{display:flex;justify-content:center;gap:0;height:150px}.intro-duo svg{height:100%;width:auto}.intro h2{margin:6px 0 0;font-size:30px}.lead{margin:0;opacity:.75;font-weight:700}.how{text-align:left;font-size:15px;line-height:1.25;padding-left:22px;margin:4px 0}.how li{margin:6px 0}
.lu{align-items:center;text-align:center}.lu-star{font-size:60px;color:var(--gold);text-shadow:0 3px 0 var(--ink);animation:pop-in .5s}.lu ul{list-style:none;padding:0;margin:0;text-align:left;width:100%}.lu li{display:flex;align-items:center;gap:10px;padding:5px 0;font-weight:800}.lu-ico{width:38px;height:38px;flex:none}
.muted{opacity:.6}
@keyframes pulse{50%{transform:scale(1.04)}}@keyframes oops{20%{transform:translateX(-6px)}50%{transform:translateX(6px)}80%{transform:translateX(-3px)}}@keyframes fup{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-70px);opacity:0}}@keyframes fdown{from{transform:translateY(-10px);opacity:0}}@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes pop-in{from{transform:scale(.7);opacity:0}}@keyframes hop{50%{transform:translateY(-14px)}}@keyframes bob{to{transform:translateY(-4px)}}@keyframes banner{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.05)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.av-eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.4s infinite}@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.av-body{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}@keyframes breathe{50%{transform:scaleY(1.018)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.qa *,.qa *:before,.qa *:after{animation:none!important;transition:none!important}
.card.unlock{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#eef4ff;border-color:#c5d6f2}.card.festival{background:#fff3f8;border-color:#f2b6cf}
.book-btn.dot{position:relative}.book-btn.dot:after{content:"";position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff}
.rb .reqs{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}.rb .reqs li{display:flex;justify-content:space-between;gap:8px;font-size:12px;opacity:.85}.rb .reqs li.ok{color:var(--good);opacity:1}.rb .reqs small{opacity:.7;white-space:nowrap}
.rb.ready{border-color:var(--gold);background:#fff9e6}.rb.locked{opacity:.9}
a.setting{text-decoration:none;color:inherit}
.btn.gift{background:linear-gradient(#ffe08a,#f2b632);border-color:var(--ink,#3b302b);color:var(--ink,#3b302b);font-weight:800}
/* ---------- the station: Aniki's counter layout on a 420-wide stage (scaled by ui.js fit()) ---------- */
.sim{position:fixed;inset:0;overflow:hidden;background:var(--out,#2a2f45);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  --ol:#3b302b;--hud:#fbf7ee;--wood:#e2c79b;--wood-d:#b98f5c;--badge:#fbe7c8;--muted:#8a7866;--matcha:#5f9a3c;--navy:#43528a;
  --display:"Baloo 2",system-ui,sans-serif;--body:"Nunito","Baloo 2",system-ui,sans-serif}
.sim button{touch-action:manipulation}
.st-vp{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
@media (min-width:541px){.st-vp{align-items:center}}
.st-wrap{position:relative;flex:none;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.st-stage{position:absolute;left:0;top:0;width:420px;height:860px;transform-origin:0 0;display:flex;flex-direction:column;background:var(--paper);overflow:hidden}

/* HUD */
.hud{position:relative;flex:none;height:62px;background:var(--hud);border-bottom:2px solid #9c7858;display:flex;align-items:center;padding:0 10px;gap:8px;z-index:6}
.pause{width:44px;height:44px;flex:none;border-radius:50%;background:#fff;border:2.5px solid var(--ol);display:grid;place-items:center;box-shadow:inset 0 0 0 4px #f6e3dc}
.pause svg{width:18px;height:18px}
.dayb{line-height:1.05;min-width:0;flex:0 1 auto}
.dayb b{font-family:var(--display);font-size:17px;font-weight:800;display:block;white-space:nowrap}
.dayb span{display:block;font-family:var(--body);font-size:12px;color:var(--muted);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.mid{flex:1;min-width:0;text-align:center;line-height:1}
.level-btn{display:inline-flex;gap:4px;max-width:100%;margin:0 auto 2px;padding:2px 9px;border-radius:8px;background:#ece3d2;color:var(--navy);font-family:var(--display);font-size:14px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-money{display:block;font-family:var(--display);font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rate{position:relative;flex:none;text-align:right;line-height:1.1;padding:2px 2px}
.rate .stars{display:block;color:var(--gold);font-size:15px;letter-spacing:-1px;-webkit-text-stroke:.6px #b98314}
.rate small{display:block;font-family:var(--body);font-size:10.5px;color:var(--muted);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.streak{position:absolute;right:0;top:100%;margin-top:6px;font-size:12px;font-weight:800;background:#fff;border:2px solid var(--ol);border-radius:10px;padding:0 7px;opacity:0;transform:scale(.6);transition:.25s;white-space:nowrap}.streak.on{opacity:1;transform:none}
.xp-track{position:absolute;left:0;bottom:0;width:100%;height:4px;background:#dfd3c2;overflow:hidden}.xp-track i{display:block;height:100%;background:var(--accent);transition:width .35s}

/* scene: the guest at the counter */
.scene{position:relative;flex:1 1 176px;min-height:160px;max-height:280px;overflow:hidden;background:#c99b62}
.scene-art{position:absolute;inset:0}.scene-art>svg{position:absolute;left:0;width:100%}.scene-back{top:0;height:100%}.scene-front{bottom:0;height:22%;z-index:3;pointer-events:none}
.scene-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%}
.scene-art.dark{filter:brightness(.55)}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(#dcaa6b,#b27a41);border-top:2px solid #6b4326;box-shadow:0 -4px 8px rgba(50,25,8,.3);z-index:4}
.scene>.big{position:absolute;left:0;bottom:10px;width:138px;height:calc(100% - 50px);max-height:180px;z-index:2;transform-origin:50% 100%}
.scene>.big>svg,.scene>.big>img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 3px 4px rgba(40,20,5,.35));overflow:visible}
.scene>.big.enter{animation:guestIn .45s ease-out}.scene>.big.happy{animation:hop .5s ease-out 2}.scene>.big.gone{opacity:.35;transform:translateX(-30px);transition:.4s}
@keyframes guestIn{from{transform:translateX(40px);opacity:0}}
.queue{position:absolute;left:8px;top:8px;display:flex;gap:3px;z-index:5}
.qface{position:relative;width:36px;height:36px;flex:none;border-radius:50%;background:#fff7e9;border:2px solid var(--ol);overflow:hidden}
.qface>svg,.qface>img{position:absolute;left:-32%;top:-6%;width:164%;height:auto;object-fit:cover}
.qface::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 3px var(--ring,var(--matcha))}
.qface.cooking{outline:2px solid var(--good);outline-offset:1px}.qface.gone,.qface.happy{opacity:.5}
.crewrow{position:absolute;right:6px;bottom:14px;display:flex;gap:0;z-index:3;pointer-events:none}.crew-av{width:36px;height:42px}.crew-av svg{width:100%;height:100%}.crew-av.busy{animation:bob .5s infinite alternate}
.bubble{position:absolute;left:140px;right:10px;top:12px;min-height:104px;max-height:calc(100% - 30px);background:#fffaf0;border:2.5px solid #5a4031;border-radius:18px;padding:9px 12px 10px;display:flex;flex-direction:column;gap:5px;z-index:4;box-shadow:0 4px 0 rgba(90,55,25,.45)}
.bubble::before{content:"";position:absolute;left:-13px;top:40px;border:10px solid transparent;border-right:13px solid #5a4031;border-left:0}
.bubble::after{content:"";position:absolute;left:-8px;top:42px;border:8px solid transparent;border-right:10px solid #fffaf0;border-left:0}
.b-who{font-family:var(--body);font-size:12px;font-weight:900;color:var(--navy);display:flex;gap:5px;align-items:center;line-height:1.1}
.b-who em{font-style:normal;background:var(--gold);color:var(--ink);border-radius:8px;padding:0 5px;font-size:10px}
.bubble p{margin:0;font-family:var(--body);font-size:15.5px;line-height:1.3;font-weight:800;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.bubble p b{color:var(--accent);font-weight:900}
.bubble p.say{font-size:12.5px;color:var(--muted);-webkit-line-clamp:2}
.pat{display:flex;align-items:center;gap:6px;margin-top:auto}
.pat span{font-family:var(--body);font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.pat i{flex:1;height:12px;border:2px solid var(--ol);border-radius:8px;overflow:hidden;background:#f3efe6;display:block}
.pat i em{display:block;height:100%;width:100%;background:var(--matcha);border-radius:6px;transition:width .2s linear,background .3s}
.pat i em.mid{background:var(--gold)}.pat i em.low{background:var(--bad);animation:pulse .6s infinite}
.recipe-btn{flex:none;height:26px;padding:0 8px;border-radius:8px;border:2px solid var(--ol);background:var(--badge);font-family:var(--body);font-size:11.5px;font-weight:900;box-shadow:0 2px 0 var(--ol)}
.recipe-pop{position:absolute;left:140px;right:10px;top:12px;z-index:6;background:#fffaf0;border:2.5px solid var(--ol);border-radius:14px;padding:8px 10px;box-shadow:0 4px 0 rgba(0,0,0,.2);cursor:pointer}
.recipe-pop[hidden]{display:none}.recipe-pop .chips{margin-top:4px}

/* counter shelf: vessels, pots, bottles */
.counter{position:relative;flex:none;height:118px;display:flex;align-items:stretch;justify-content:space-around;gap:4px;padding:6px 8px 18px;background:linear-gradient(#f5e7cc,#e9d0a4);z-index:1}
.counter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:15px;background:linear-gradient(#c89458,#a8743f);border-top:2px solid #6b4326;border-bottom:2px solid #5a3a22}
.counter:empty{display:none}
.slot{position:relative;flex:1;max-width:74px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;border-radius:10px;z-index:1;padding-top:2px}
.slot .art{flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}.slot .art>svg,.slot .art>img{width:100%;height:100%;max-height:80px;object-fit:contain;object-position:50% 100%}
.slot .nm{position:relative;z-index:1;max-width:100%;font-family:var(--body);font-weight:900;font-size:10px;line-height:1.05;text-align:center;background:#fffaf0;border:1px solid #9c7858;border-radius:5px;padding:2px 4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:normal;hyphens:auto}
.slot.hint{background:rgba(255,232,157,.75);box-shadow:inset 0 0 0 2px #b76d20;animation:pulse 1s infinite}
.slot.locked .art{filter:grayscale(1);opacity:.4}.slot.locked .nm{opacity:.55}
.lockchip{position:absolute;left:50%;top:18%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0;background:rgba(255,250,240,.95);border:1.5px solid #9c7858;border-radius:8px;padding:2px 6px;font-family:var(--body);font-size:10px;font-weight:900;line-height:1.1;white-space:nowrap;z-index:2}
.st-tile .lockchip{top:22%}
.st-badge{position:absolute;top:-6px;right:-4px;min-width:24px;height:22px;padding:0 5px;border-radius:12px;background:var(--badge);border:2px solid var(--ol);font-family:var(--body);font-size:11.5px;font-weight:900;display:grid;place-items:center;font-variant-numeric:tabular-nums;z-index:2}
.st-badge.low{background:var(--accent);color:#fff}
.slot .st-badge{top:0;right:0}

/* work area: board + ingredient bank */
.work{position:relative;flex:2 1 300px;min-height:0;display:flex;gap:8px;padding:10px;background:linear-gradient(#f6ead3,#f1e0c2)}
.board{position:relative;flex:0 0 148px;min-height:0;background:#e8c78e;border:2.5px solid #5b3e2e;border-radius:14px;box-shadow:0 4px 0 var(--wood-d),inset 0 0 0 4px rgba(255,240,210,.35);background-image:repeating-linear-gradient(90deg,transparent 0 18px,rgba(142,85,34,.08) 18px 20px)}
.board .tools{position:absolute;right:6px;top:6px;z-index:3}
.board .tool{width:46px;height:46px;padding:5px;background:#fffaf0;border:2px solid #8a6446;border-radius:10px;display:grid;place-items:center;box-shadow:0 2px 0 #c29662}.board .tool svg{width:100%;height:100%}.board .tool:disabled{opacity:.45}
.board .dish{position:absolute;left:4px;right:4px;top:50px;bottom:40px;display:flex;align-items:center;justify-content:center}
.board .dish svg.product{width:100%;max-height:100%;filter:drop-shadow(0 4px 0 rgba(59,48,43,.14))}
.board .dish svg.product.empty{opacity:.7}
.board .hint{position:absolute;inset:52px 8px 40px;display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:700;font-size:17px;color:#9b6e3f;line-height:1.15;pointer-events:none}
.board .hint:empty{display:none}
.addcount{position:absolute;left:5px;right:5px;bottom:6px;display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.addcount span{font-family:var(--body);font-size:10.5px;font-weight:900;background:#fffaf0;border:1.5px solid #9c7858;border-radius:8px;padding:1px 6px;white-space:nowrap}
.work-right{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px}
.bank-tabs{flex:none;height:40px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}
.bank-tabs::-webkit-scrollbar{display:none}.bank-tabs[hidden]{display:none}
.bank-tab{flex:1 1 0;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 9px;background:#fff8e9;border:2px solid #826045;border-radius:10px;font-family:var(--display);font-size:15px;font-weight:800;line-height:1;color:#65513f;box-shadow:0 2px 0 #bd9265;white-space:nowrap}
.bank-tab .ic{width:22px;height:22px;flex:none}
.bank-tab span:last-child{overflow:hidden;text-overflow:ellipsis}
.bank-tabs.many .bank-tab{flex:0 0 auto;min-width:44px;padding:0 7px}.bank-tabs.many .bank-tab:not([aria-selected="true"]) span:last-child{display:none}
.bank-tab[aria-selected="true"]{background:var(--accent);border-color:#6d2f24;color:#fff;box-shadow:0 3px 0 #6d2f24}
.bank{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-auto-rows:minmax(86px,112px);gap:9px 7px;align-content:start;padding:8px 4px 6px 0;scrollbar-width:none}
.bank::-webkit-scrollbar{display:none}
.st-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:0;min-height:0;padding:4px 3px 3px;background:#fffaf0;border:2px solid #b08a60;border-radius:12px;box-shadow:0 3px 0 #c9a06d}
.st-tile .art{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}.st-tile .art>svg,.st-tile .art>img{width:100%;height:100%;object-fit:contain}
.st-tile .nm{width:100%;font-family:var(--body);font-size:11.5px;font-weight:900;line-height:1.05;text-align:center;color:#4a3526;padding:2px 1px;background:#f3e6cf;border-radius:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:normal;hyphens:auto}
.bank[data-cols="4"] .st-tile .nm{font-size:9.5px;letter-spacing:-.2px}
.st-tile.locked .art{filter:grayscale(1);opacity:.35}.st-tile.locked .nm{opacity:.55}
.st-tile.hint{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,182,50,.6),0 3px 0 #c9a06d;animation:pulse 1s infinite}
.st-tile.got,.slot.got{border-color:var(--good);background:#f0fbe9}
.st-tile:active,.slot:active,.board .tool:active,.bell:active,.bank-tab:active{transform:translateY(2px)}
.shake{animation:oops .3s}

/* skill steps open over the work area */
.focus{position:absolute;top:6px;bottom:6px;right:6px;left:162px;z-index:7;display:flex;flex-direction:column;gap:6px;background:#fffdf6;border:2.5px solid var(--ol);border-radius:16px;box-shadow:0 5px 0 rgba(59,48,43,.25);padding:8px 10px;animation:pop-in .2s ease-out}
.focus[hidden]{display:none}.focus.wide{left:6px}
.focus-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--display);font-size:17px;font-weight:800}
.wh-dots{display:flex;gap:4px}.wh-dots i{width:10px;height:10px;border-radius:50%;background:#e2d6b8;border:1.5px solid var(--ink)}.wh-dots i.on{background:var(--good)}.wh-dots i.cur{background:var(--gold)}
.widget{position:relative;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.idle,.oos{margin:auto;text-align:center;font-weight:800;opacity:.7;padding:8px}.oos{opacity:1;display:flex;flex-direction:column;gap:6px;align-items:center}.oos b{color:var(--bad)}.oos small{opacity:.6}

/* serve bar */
.servebar{position:relative;flex:none;height:86px;display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(#dfba84,#bf8953);border-top:3px solid #63452f;box-shadow:inset 0 6px 0 #ecd0a2;z-index:1}
.serve-note{flex:1;min-width:0;font-family:var(--body);font-size:14px;font-weight:900;line-height:1.25;color:#563923;padding:4px 6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.serve-note.coaching{color:#8a3a0c}
.bell{flex:none;width:176px;height:62px;display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 10px;border:3px solid #613a2a;border-radius:16px;background:var(--accent);box-shadow:0 5px 0 #6d2f24;color:#fff;font-family:var(--display);font-size:19px;font-weight:800;line-height:1;white-space:nowrap}
.bell>svg{width:44px;height:38px;flex:none}
.bell .bl{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-transform:uppercase}.bell small{font-size:13px;opacity:.95;text-transform:none}
.bell.ready{animation:ring 1.1s infinite}
@keyframes ring{0%,60%,100%{transform:none}70%{transform:rotate(-3deg) scale(1.03)}80%{transform:rotate(3deg) scale(1.03)}90%{transform:rotate(-2deg)}}

/* toasts land over the work area, like Aniki's */
.sim .toasts{top:auto;bottom:calc(96px + env(safe-area-inset-bottom))}
@media (min-width:860px){.sheet{border-radius:24px;border-bottom:3px solid var(--ink);margin-bottom:4vh}.sheet-host.on{align-items:center}}

.ic img,.st-tile .art img,.slot .art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
/* sprite-built dishes (themes that layer painted sprites, e.g. Aniki Ramen) */
.work-dish{position:relative;width:100%;aspect-ratio:1/1;max-height:100%}
.work-dish .vessel{position:absolute}
.work-dish .vimg{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 4px 3px rgba(78,48,27,.35))}
.work-dish .lay{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(78,48,27,.45))}
.work-dish .broth{position:absolute;border-radius:50%;background-image:radial-gradient(ellipse at 34% 28%,rgba(255,255,255,.65) 0 9%,transparent 30%);box-shadow:inset 0 4px 10px rgba(80,45,15,.45),0 0 0 2px rgba(110,70,30,.3)}
.work-dish .steam{position:absolute;left:24%;top:-28%;width:52%;height:45%;display:flex;justify-content:space-around;pointer-events:none}
.work-dish .steam i{display:block;width:13%;height:65%;border-left:3px solid rgba(255,255,245,.8);border-radius:50%;opacity:0;animation:steamRise 2.2s ease-out infinite}
.work-dish .steam i:nth-child(2){animation-delay:.7s}.work-dish .steam i:nth-child(3){animation-delay:1.4s}
@keyframes steamRise{0%{opacity:0;transform:translateY(8px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-14px)}}
.work-dish .drizzle{position:absolute;overflow:visible;pointer-events:none}
.scene-art>img.scene-img{object-position:center 34%}
.scene>.big>img.portrait{animation:guestBreath 3.6s ease-in-out infinite;transform-origin:50% 95%}
@keyframes guestBreath{50%{transform:scaleY(1.015)}}
.qface>img.portrait{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.5);transform-origin:50% 8%}
.crew-av>img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.sim img.spr{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.fly{position:absolute;z-index:28;pointer-events:none;display:flex;align-items:center;justify-content:center}.fly>svg,.fly>img{width:100%;height:100%;object-fit:contain}
.board.bump{animation:bump .25s ease-out}@keyframes bump{40%{transform:scale(1.025)}}
.level-btn .brand{min-width:0;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;padding-top:1px}.level-btn span:last-child{flex:none}
