/* פסטה בסטה — שעת עומס. Brand: brandbook NOTES.md (green #02473B, cream #E4D7C4, off-white #FCFAF8, red #FF3742; accents mustard/orange/pink). Body Alenbi Sans, headings Narkiss Block. */
@font-face{font-family:Alenbi;font-weight:400;font-display:swap;src:url(assets/fonts/AlenbiSans_Regular.woff) format("woff")}
@font-face{font-family:Alenbi;font-weight:500;font-display:swap;src:url(assets/fonts/AlenbiSans_Medium.woff) format("woff")}
@font-face{font-family:Alenbi;font-weight:700;font-display:swap;src:url(assets/fonts/AlenbiSans_Bold.woff) format("woff")}
@font-face{font-family:Alenbi;font-weight:900;font-display:swap;src:url(assets/fonts/AlenbiSans_Black.woff) format("woff")}
@font-face{font-family:Narkiss;font-weight:400;font-display:swap;src:url(assets/fonts/NarkissBlock-Regular.woff2) format("woff2")}
@font-face{font-family:Narkiss;font-weight:700;font-display:swap;src:url(assets/fonts/NarkissBlock-Bold.woff2) format("woff2")}
:root{--forest:#02473B;--forest2:#0E5B4C;--deep:#01302A;--ivory:#FCFAF8;--cream:#E4D7C4;--yellow:#EFA807;--mustard:#D89606;--sage:#5A716A;--red:#FF3742;--red2:#C8192A;--orange:#FF8642;--pink:#FB8ABB;--green:#2E7D5B}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;background:#02473B;font-family:Alenbi,sans-serif;color:var(--deep)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
#app{position:absolute;left:0;top:0;width:390px;height:844px;overflow:visible;transform-origin:0 0;user-select:none;-webkit-user-select:none}
.stage{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 34%,#FCFAF8 0%,#F1E8DC 62%,#E4D7C4 100%)}
svg#world{position:absolute;left:0;top:0}

/* HUD */
.hud{position:absolute;top:6px;left:12px;right:12px;height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:16px;background:rgba(252,250,248,.86);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(1,48,42,.12),inset 0 0 0 1px rgba(2,71,59,.08);z-index:5}
.day{display:flex;flex-direction:column;line-height:1.05;min-width:62px}
.day b{font:700 15px Narkiss;color:var(--forest)}
.day span{font:500 10px Alenbi;color:var(--sage)}
.clock{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.clock .t{font:700 15px Narkiss;color:var(--deep);display:flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums}
.rush{font:700 10px Alenbi;color:#fff;background:var(--red);padding:1px 7px 2px;border-radius:9px}
.rush[hidden]{display:none}
.bar{width:120px;height:6px;border-radius:3px;background:#E4D7C4;overflow:hidden;direction:ltr}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),#FF8642)}
.coins{display:flex;align-items:center;gap:5px;font:700 15px Narkiss;color:var(--deep);direction:ltr;font-variant-numeric:tabular-nums;min-width:52px}
.coin{display:inline-block;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFD36B,#EFA807 55%,#B97F00);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);flex:none}
.stars{font-size:13px;color:var(--yellow);letter-spacing:-1px;text-shadow:0 1px 0 #A87604;direction:ltr}
.stars .off{color:#D6C9B5;text-shadow:none}

/* pots: HTML hit areas over the SVG pots (positions set by ui.js) */
.pot{position:absolute;width:44px;height:60px;z-index:3;--lx:0px;--pw:48px;--row:0}
.pot[data-row="1"]{--row:1}
/* AS3 r2b compact pill above the kettle box: name (wraps to 2 lines) + sauce dot + count; row 1 sits one pill higher */
.pot .pl{position:absolute;left:calc(50% + var(--lx));bottom:calc(100% + 1px + var(--row) * 31px);transform:translateX(-50%);box-sizing:border-box;width:max-content;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:26px;max-width:var(--pw);height:29px;padding:1px 3px 3px;border-radius:7px;background:var(--ivory);box-shadow:0 2px 5px rgba(1,48,42,.25);color:var(--forest);overflow:hidden;transition:background-color .2s,color .2s}
.pot .pl .pn{font:700 8.5px/1 Alenbi;text-align:center;white-space:normal;overflow-wrap:anywhere}
.pot .pl small{display:flex;align-items:center;gap:2px;margin-top:1px;font:700 8.5px/1 Alenbi;color:var(--sage);font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr}
.pot .pl .pd{display:inline-block;width:6px;height:6px;border-radius:50%;box-shadow:0 0 0 1px rgba(1,48,42,.3);flex:none}
.pot .pl .cb{display:none;position:absolute;left:4px;right:4px;bottom:1px;height:2px;border-radius:1px;background:#E4D7C4;overflow:hidden;direction:ltr}
.pot .pl .cb i{display:block;height:100%;width:0;background:var(--yellow)}
.pot[data-state=low] .pl{background:#FCEBC4}
.pot[data-state=empty] .pl{background:var(--red);color:#fff}
.pot[data-state=empty] .pl small{color:#FFE4E6}
.pot[data-state=cooking] .pl{background:var(--forest);color:var(--ivory)}
.pot[data-state=cooking] .pl small{color:var(--yellow)}
.pot[data-state=cooking] .pl .cb{display:block}
.pot:active .pl{transform:translate(-50%,1px)}

/* order rail */
.rail-h{position:absolute;top:402px;right:16px;left:16px;display:flex;justify-content:space-between;align-items:baseline;z-index:2}
.rail-h b{font:700 18px Narkiss;color:var(--forest)}
.rail-h span{font:500 11px Alenbi;color:var(--sage)}
.rail{position:absolute;top:428px;right:12px;left:12px;height:172px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;z-index:2}
.tk{display:block;text-align:right;height:172px;border-radius:16px;background:#fff;box-shadow:0 8px 18px rgba(1,48,42,.14);overflow:hidden;position:relative;transition:box-shadow .25s,transform .15s}
.tk .ph{height:64px;background-size:cover;background-position:center}
.tk .ch{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:8px;background:var(--forest);display:grid;place-items:center}
.tk .ch svg{width:15px;height:15px}
.tk .nm{font:700 14px/1.15 Narkiss;color:var(--deep);padding:7px 8px 0}
.tk .ad{font:500 10.5px/1.3 Alenbi;color:var(--sage);padding:2px 8px 0}
.tk .ad.has{color:var(--forest);font-weight:700}
.tk .dl{font:700 10px/1.3 Alenbi;color:#8A5F00;padding:1px 8px 0}
.tk .pt{position:absolute;bottom:9px;right:8px;left:8px;height:6px;border-radius:3px;background:#EFE6D8;overflow:hidden;direction:ltr}
.tk .pt i{display:block;height:100%;border-radius:3px;background:var(--green);transition:background-color .3s}
.tk.hot{box-shadow:0 0 0 2px var(--red),0 8px 18px rgba(255,55,66,.25)}
.tk.hot .pt i{background:var(--red)}
.tk.warm .pt i{background:var(--yellow)}
.tk.match{box-shadow:0 0 0 3px var(--yellow),0 8px 18px rgba(239,168,7,.35)}
.tk:active{transform:translateY(2px)}
.shake{animation:shake .38s linear}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* status row: bowl in the slot + goal/combo */
.status{position:absolute;top:606px;left:12px;right:12px;height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2}
.slot{display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 12px;border-radius:23px;background:#fff;box-shadow:0 4px 12px rgba(1,48,42,.12);min-width:150px;transition:box-shadow .2s}
.slot .th{width:36px;height:36px;border-radius:50%;background:#EFE6D8 center/cover;flex:none;box-shadow:inset 0 0 0 2px #fff}
.slot .tx{display:flex;flex-direction:column;line-height:1.1}
.slot .tx span{font:500 10px Alenbi;color:var(--sage)}
.slot .tx b{font:700 14px Narkiss;color:var(--deep);white-space:nowrap}
.slot[data-soup=""] .th{background-image:none!important}
.goal{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font:500 11px Alenbi;color:var(--sage);text-align:left}
.goal b{font:700 12px Narkiss;color:var(--forest)}
.combo{font:700 11px Alenbi;color:var(--deep);background:var(--yellow);padding:1px 8px 2px;border-radius:9px;opacity:0;transition:opacity .2s}
.combo.on{opacity:1}

/* topping dock */
.dock{position:absolute;top:660px;left:12px;right:12px;height:174px;border-radius:24px;background:var(--forest);box-shadow:0 10px 24px rgba(1,48,42,.3);display:flex;flex-direction:column;justify-content:space-evenly;padding:4px 6px;z-index:2}
.dock .row{height:78px;display:flex;justify-content:space-around;align-items:center}
.dock .rack{border-top:1px solid rgba(252,250,248,.14)}
.dock.one{top:746px;height:88px}
.dock.one .rack{display:none}
.tp{display:flex;flex-direction:column;align-items:center;gap:5px;width:62px}
.tp .ic{width:48px;height:48px;border-radius:16px;background:var(--ivory);display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(1,48,42,.12);transition:transform .15s,background-color .15s,box-shadow .15s}
.tp .ic svg{width:34px;height:34px}
.tp span{font:500 10px Alenbi;color:#DDE5DF;white-space:nowrap}
.tp.on .ic{background:var(--yellow);transform:translateY(-4px);box-shadow:0 6px 0 #A87604}
.tp:disabled{opacity:.32}
.tp:disabled span{font-size:9px}
.dock.nobowl .tp:not(:disabled) .ic{opacity:.55}

/* floating coin text (minimal; anim.js may replace) */
.float{position:absolute;font:700 16px Narkiss;color:var(--forest);background:var(--yellow);padding:1px 8px;border-radius:10px;z-index:6;pointer-events:none;transition:transform .9s ease-out,opacity .9s ease-in;direction:ltr}
.float.go{transform:translateY(26px);opacity:0}

/* overlays */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(1,48,42,.45);backdrop-filter:blur(3px);transition:opacity .25s}
.overlay[hidden]{display:none}
.card{width:100%;max-width:350px;border-radius:26px;background:var(--ivory);box-shadow:0 20px 50px rgba(1,48,42,.35);padding:22px 20px 20px;text-align:center}
.card .logo{height:34px;margin:0 auto 6px;display:block}
.card h1{font:700 34px/1.05 Narkiss;color:var(--forest)}
.card .sub{font:700 15px Alenbi;color:var(--sage);margin-top:6px}
.card .lvl{margin:16px 0 4px;font:700 17px Narkiss;color:var(--deep)}
.card .intro{font:500 13px/1.45 Alenbi;color:var(--sage)}
.card ol{list-style:none;margin:14px 0 4px;display:grid;gap:7px;text-align:right}
.card ol li{display:flex;gap:9px;align-items:center;font:500 13px/1.3 Alenbi;color:var(--deep)}
.card ol li b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--forest);color:var(--yellow);display:grid;place-items:center;font:700 12px Alenbi}
.card .owned{font:500 12px Alenbi;color:var(--forest);margin-top:8px}
.big{display:block;width:100%;margin-top:18px;height:58px;border-radius:20px;background:var(--yellow);color:var(--deep);font:700 22px Narkiss;box-shadow:0 6px 0 #A87604;transition:transform .1s,box-shadow .1s}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #A87604}
.rstars{font-size:46px;letter-spacing:4px;color:var(--yellow);text-shadow:0 2px 0 #A87604;direction:ltr;line-height:1;margin:6px 0 2px}
.rstars .off{color:#D6C9B5;text-shadow:none}
.rtitle{font:700 24px Narkiss;color:var(--forest)}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.rgrid div{background:#fff;border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;gap:2px}
.rgrid b{font:700 19px Narkiss;color:var(--deep);direction:ltr;font-variant-numeric:tabular-nums}
.rgrid span{font:500 10.5px Alenbi;color:var(--sage)}
.cause{margin-top:10px;padding:9px 12px;border-radius:14px;background:#FFE4E6;color:#B3172A;font:700 12.5px/1.4 Alenbi;text-align:right}
.next{margin-top:10px;padding:9px 12px;border-radius:14px;background:var(--forest);color:var(--ivory);font:500 12.5px/1.4 Alenbi;text-align:right}
.next b{color:var(--yellow);font-family:Narkiss;font-size:14px}
.wallet{margin-top:8px;font:500 12px Alenbi;color:var(--sage);display:flex;justify-content:center;align-items:center;gap:5px}
.upg{margin-top:12px;text-align:right}
.upg>p{font:700 13px Alenbi;color:var(--deep);margin-bottom:6px}
.upg .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.upg button{background:#fff;border-radius:14px;padding:8px 8px 9px;text-align:right;box-shadow:inset 0 0 0 2px #E4D7C4;display:flex;flex-direction:column;gap:2px}
.upg button b{font:700 14px Narkiss;color:var(--forest)}
.upg button span{font:500 11px/1.3 Alenbi;color:var(--sage)}
.upg button em{font:700 11px Alenbi;color:var(--deep);font-style:normal;display:flex;align-items:center;gap:4px}
.upg button em .coin{width:14px;height:14px}
.upg button:disabled{opacity:.5}
.upg .done{font:700 13px Alenbi;color:var(--forest);background:#E1EEE8;border-radius:12px;padding:8px 10px}
.btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:16px}
.btns button{height:52px;border-radius:18px;font:700 19px Narkiss}
.btns .again{background:#fff;color:var(--forest);box-shadow:inset 0 0 0 2px var(--forest)}
.btns .cont{background:var(--yellow);color:var(--deep);box-shadow:0 5px 0 #A87604}
.btns .cont:disabled{background:#E4D7C4;box-shadow:none;color:#8d968f}
#pause .card{max-width:260px}
#pause h2{font:700 24px Narkiss;color:var(--forest)}
#log{position:absolute;inset:0;z-index:40;background:var(--ivory);overflow:auto;padding:14px;font:12px/1.4 monospace;direction:ltr;text-align:left;white-space:pre-wrap;user-select:text}
#log[hidden]{display:none}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* D1c2: rack row, picker, side icons, meal tickets */
.tp,.rk{position:relative;min-height:62px}
.rk{display:flex;flex-direction:column;align-items:center;gap:5px;width:62px}
.tp .ic img,.rk .ic img{width:40px;height:40px;object-fit:contain}
.rk .ic{position:relative;width:48px;height:48px;border-radius:16px;background:var(--ivory);display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(1,48,42,.12)}
.rk span{font:500 10px Alenbi;color:#DDE5DF;white-space:nowrap}
.rk .ct{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--yellow);color:var(--deep);font:700 11px/18px Alenbi;font-style:normal;text-align:center;display:none}
.rk:not([data-count="0"]) .ct{display:block}
.rk.on .ic{background:var(--yellow);transform:translateY(-4px)}
.rk[data-state=empty] .ic{box-shadow:0 0 0 2px var(--red)}
.rk[data-state=heating] .ic{box-shadow:0 0 0 2px var(--yellow)}
.rk-hint{font:500 12px Alenbi;color:#C9D4CD}
.nw{position:absolute;top:-6px;right:-4px;font:700 9px/14px Alenbi;font-style:normal;color:var(--deep);background:var(--yellow);padding:0 5px;border-radius:7px;z-index:1}
.picker{position:absolute;top:606px;left:12px;right:12px;height:228px;border-radius:24px;background:var(--ivory);box-shadow:0 -6px 24px rgba(1,48,42,.28);z-index:5;display:flex;flex-direction:column;overflow:hidden}
.picker[hidden]{display:none}
.pk-h{height:44px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px 0 4px;background:var(--forest);color:var(--ivory)}
.pk-h b{font:700 16px Narkiss}
.pk-h span{flex:1;font:500 10.5px Alenbi;color:#C9D4CD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-x{width:44px;height:44px;font:700 18px Alenbi;color:var(--ivory)}
.pk-g{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:6px;padding:6px;overflow-y:auto}
.pk{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;border-radius:14px;background:#fff;box-shadow:0 3px 8px rgba(1,48,42,.1);padding:2px}
.pk img{width:52px;height:44px;object-fit:contain}
.pk b{font:700 11.5px/1.1 Narkiss;color:var(--deep);text-align:center}
.pk small{font:700 9.5px Alenbi;color:var(--sage)}
.pk.on{box-shadow:0 0 0 3px var(--yellow)}
.pk[data-state=empty]{background:#FFE4E6}.pk[data-state=empty] small{color:var(--red)}
.pk[data-state=heating],.pk[data-state=cooking]{background:#EEF3EF}
.tk .sd{display:flex;gap:3px;padding:3px 7px 0;flex-wrap:wrap}
.tk .sd{gap:2px;flex-wrap:nowrap}
.tk .sd i{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:7px;background:#F6F0E7;padding:2px 1px 1px}
.tk .sd img{width:19px;height:19px;object-fit:contain}
.tk .sd u,.slot .tr u{text-decoration:none;font:700 9.5px/1 Narkiss;color:var(--deep);text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
/* B3/B4: names wrap to 2 lines; tickets with sides get a shorter photo so name + sides + delivery row + patience bar all fit the fixed 172px card */
.tk .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.1;padding:5px 8px 0;min-height:1.1em}
.tk.hs .ph{height:44px}
.tk.hs .ml{top:28px}
.tk.hs .ad{padding-top:1px;line-height:1.2}
.tk.hs .sd{padding:2px 7px 0}
.tk .dl{padding-top:0;line-height:1.2;white-space:nowrap}
.tk .ml{position:absolute;top:44px;right:0;left:0;font:700 9.5px/18px Alenbi;text-align:center;color:var(--deep);background:var(--yellow)}
.tk .nw{top:6px;right:auto;left:6px}
.tk.meal{box-shadow:0 0 0 3px #D89606,0 8px 18px rgba(1,48,42,.14)}
.tk.meal.match{box-shadow:0 0 0 3px var(--yellow),0 0 0 6px #D89606}
.slot{position:relative}
.slot .tr{display:flex;gap:2px}
.slot .tr i{width:38px;display:flex;flex-direction:column;align-items:center;gap:0;border-radius:7px;background:#F6F0E7;padding:1px 0}
.slot .tr img{width:17px;height:17px}
.slot .tr u{font-size:9px;line-height:.95}
.slot .tr img{width:19px;height:19px;object-fit:contain}
.slot .x{font:700 11px Alenbi;color:var(--sage);margin-inline-start:2px;display:none}
.slot.full .x{display:inline}
.next{display:flex;align-items:center;gap:10px}
.next img{width:52px;height:52px;object-fit:contain;flex:none;background:var(--ivory);border-radius:12px}
/* G1 (owner phone shot 10-23): the 3D floor now runs under the HUD layer, so text on the floor gets an ivory pill,
   and with a one-row dock the rail + status slide down to it (no empty band above the dock) */
.rail-h b,.rail-h span,.goal{background:rgba(252,250,248,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:2px 10px;box-shadow:0 2px 8px rgba(1,48,42,.1)}
.rail-h span.cour{background:var(--forest);color:var(--yellow);font-weight:700;font-size:12px}
.goal{padding:4px 10px;white-space:nowrap;font-size:10.5px}
#app:has(.dock.one) .rail-h{top:488px}
#app:has(.dock.one) .rail{top:514px}
#app:has(.dock.one) .status{top:692px}
/* G1: the tent sign already names the soup, so the stock chip sits on top of its own well, not on the counter front */
.pot{align-items:flex-start}
/* B1: the chip is the top of the hit box itself (ui.js buildPots moved the box up 24px), no translateY overflow */
/* QA-BM: any viewport shape (landscape too) — a blurred cover copy of the painting fills what the fitted #app leaves */
body::before{content:'';position:fixed;inset:-40px;background:url(assets/as/bg.webp) center 30%/cover;filter:blur(18px) brightness(.85);pointer-events:none}
/* fullscreen (Dor 10-23 phone shot): the room layer zooms to fill what the fitted stage leaves (Safari bars); HUD keeps its size. Origin = front-counter line so kettles stay clear of the HUD. */
#pots{position:absolute;left:0;top:0;width:390px;height:844px;pointer-events:none;z-index:3}
#pots>*{pointer-events:auto}
#bg-room,#world3d,svg#world,#pots{scale:var(--z,1);transform-origin:195px 410px}

/* SHELL-S1: splash, menu, map, records, profile, settings, pause */
#splash{background:var(--ivory);z-index:40;backdrop-filter:none}
#splash img{width:240px;animation:spl 1.2s ease both}
@keyframes spl{from{opacity:0;transform:scale(.92)}30%{opacity:1}to{opacity:1;transform:none}}
#menu,#map,#records,#profile,#settings,#confirm{z-index:30;background:rgba(1,48,42,.7)}
#confirm{z-index:35}
.card h2{font:700 24px Narkiss;color:var(--forest);margin-bottom:12px}
.mlist{display:grid;gap:10px;margin-top:14px}
.mlist .big{margin-top:0}
.mbtn{display:block;width:100%;min-height:50px;border-radius:18px;background:#fff;color:var(--forest);font:700 18px Narkiss;box-shadow:inset 0 0 0 2px var(--forest)}
.mbtn:active{background:#E4D7C4}
.mbtn.danger{color:var(--red);box-shadow:inset 0 0 0 2px var(--red);margin-top:12px}
.ghost{display:block;width:100%;min-height:46px;margin-top:10px;border-radius:16px;font:700 16px Narkiss;color:var(--sage)}
.ghost[hidden]{display:none}
.mapg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mt{min-height:64px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px var(--forest);color:var(--forest);font:700 20px Narkiss;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mt small{font:700 11px Alenbi;color:var(--yellow);text-shadow:0 1px 0 #A87604;direction:ltr;letter-spacing:-1px}
.mt small .off{color:#D6C9B5;text-shadow:none}
.mt[data-st=current]{background:var(--yellow);box-shadow:0 4px 0 #A87604;color:var(--deep)}
.mt[data-st=locked]{background:#E4D7C4;box-shadow:none;color:#8d968f}
.rec{display:grid;gap:4px;text-align:right;max-height:430px;overflow:auto}
.rec .rh,.rec .rr{display:grid;grid-template-columns:34px 1fr 52px 52px;gap:6px;align-items:center;min-height:30px;font:500 13px Alenbi;color:var(--deep)}
.rec .rh{font:700 11px Alenbi;color:var(--sage)}
.rec .rr b{font:700 15px Narkiss;color:var(--forest)}
.rec .rr i{font-style:normal;color:var(--yellow);text-shadow:0 1px 0 #A87604;direction:ltr;letter-spacing:-1px;font-size:12px}
.avs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.av{min-height:72px;border-radius:18px;background:#fff;font-size:40px;box-shadow:inset 0 0 0 2px #E4D7C4}
.av[aria-pressed=true]{background:var(--yellow);box-shadow:0 4px 0 #A87604}
.tot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.tot div{background:#fff;border-radius:14px;padding:8px 2px}
.tot b{display:block;font:700 19px Narkiss;color:var(--forest)}
.tot span{font:500 11px Alenbi;color:var(--sage)}
.tgl{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;margin-bottom:8px;padding:0 16px;border-radius:16px;background:#fff;font:700 18px Narkiss;color:var(--forest)}
.tgl b{min-width:54px;height:32px;line-height:32px;border-radius:16px;font:700 14px Alenbi;background:#E4D7C4;color:#6b746f}
.tgl[aria-pressed=true] b{background:var(--green);color:#fff}
.pausebtn{position:absolute;top:56px;left:12px;width:44px;height:44px;border-radius:50%;background:rgba(252,250,248,.9);box-shadow:0 3px 10px rgba(1,48,42,.2);z-index:6;display:flex;gap:5px;align-items:center;justify-content:center}
.pausebtn[hidden]{display:none}
.pausebtn i{width:5px;height:16px;border-radius:2px;background:var(--forest)}
.btns+.ghost{margin-top:8px}
#pause .card{max-width:290px}
#pause .big{height:52px;font-size:20px}
#app[data-fx=off] .overlay{transition:none}
#app[data-fx=off] #splash img{animation:none}
/* B2: the tray (icon + name per side) must stay inside the slot pill: the label shrinks with an ellipsis instead of pushing the tray out */
.slot .tx{min-width:0;flex:1 1 auto}
.slot .tx b{overflow:hidden;text-overflow:ellipsis}
.slot .tr{flex:none}
/* FU1 (desk QA): delivery bonus reads +40%; tray label wraps to 2 lines; long mix names shrink; toggle text centered */
.tk .dl .dn{display:inline-block;direction:ltr;unicode-bidi:isolate}
.slot .tx b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.05}
.tk .nm.lg{font-size:10.5px;line-height:1.05}
.tgl b{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0 8px;box-sizing:border-box}
.slot[data-soup=""] .th{display:none}
.slot .tx b{font-size:11.5px}
/* B6: picker = one short scrollable row over the toppings row only; rack row stays visible so another category is one tap */
.picker{top:598px;height:150px;border-radius:20px}
.pk-h{height:36px}
.pk-g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/4.35);grid-auto-rows:auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain}
.pk img{width:48px;height:40px}
/* QA-FU2 r1: HUD = compact card over the window (x 12-196), clear of both painted TVs (TV-A x>=202, TV-B x>=278) */
.hud{right:auto;width:184px;height:52px;top:6px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:0 8px;padding:4px 10px}
.hud .day span{display:none}
.hud .clock{flex-direction:row;gap:6px;justify-content:flex-start}
.hud .bar{width:auto;flex:1;min-width:36px}
.hud .coins{min-width:0;justify-self:end}
.pausebtn{top:64px}
/* QA-FU2 r2 note: rush badge sits under the HUD card (next to pause), not inside the 94px clock cell */
.hud .rush{position:absolute;top:58px;left:64px;font-size:11px;padding:2px 9px 3px;box-shadow:0 2px 6px rgba(1,48,42,.2)}

/* PB-B1b brand layer (Pasta Basta): green start/menu card with the white logo, red primary CTA, cream tiles, text chips for toppings */
html,body{font-family:Alenbi,system-ui,sans-serif}
.card{border-radius:24px;background:var(--ivory);box-shadow:0 24px 60px rgba(1,48,42,.38),inset 0 0 0 1px rgba(2,71,59,.06)}
.card h1,.card h2,.rtitle{font-family:Narkiss;letter-spacing:.01em}
#start .card,#menu .card{background:var(--forest);color:var(--ivory);box-shadow:0 24px 60px rgba(1,48,42,.5),inset 0 0 0 1px rgba(228,215,196,.14)}
#start .card .logo,#menu .card .logo{height:44px;width:auto;margin:4px auto 12px}
#start .card h1{font:700 30px/1.05 Narkiss;color:var(--ivory);display:inline-block;padding:2px 14px 4px;border-radius:10px;background:var(--red);transform:rotate(-2deg)}
#start .card .sub{color:var(--cream);font-weight:500;margin-top:10px}
#start .card .lvl{color:var(--ivory);font-size:18px}
#start .card .lvl b{color:var(--yellow)}
#start .card .intro{color:#C9D4CD}
#start .card ol{padding:12px;border-radius:16px;background:rgba(252,250,248,.06);box-shadow:inset 0 0 0 1px rgba(228,215,196,.12)}
#start .card ol li{color:var(--ivory)}
#start .card ol li b{background:var(--cream);color:var(--forest);font-family:Narkiss}
#start .card .owned{color:var(--yellow)}
#start .ghost,#menu .ghost{color:var(--cream)}
#menu .mbtn{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 2px rgba(228,215,196,.5)}
#menu .mbtn:active{background:rgba(252,250,248,.1)}
.big,.btns .cont{background:var(--red);color:#fff;font-family:Narkiss;box-shadow:0 6px 0 var(--red2)}
.big:active{box-shadow:0 2px 0 var(--red2)}
.btns .cont{box-shadow:0 5px 0 var(--red2)}
.btns .again{background:transparent}
.mt[data-st=current]{background:var(--red);color:#fff;box-shadow:0 4px 0 var(--red2)}
.mt[data-st=current] small{color:#fff;text-shadow:none}
#result .card{padding-top:20px;border-top:8px solid var(--forest)}
#result-card[data-stars="3"]{border-top-color:var(--yellow)}
#result-card[data-stars="0"]{border-top-color:var(--red)}
.rgrid div,.tot div{background:#F6F0E7;box-shadow:inset 0 0 0 1px rgba(2,71,59,.06)}
.rgrid b,.tot b{color:var(--forest)}
.next{background:var(--forest)}
#splash{background:var(--forest)}
#splash img{width:220px}
.hud{background:rgba(252,250,248,.92)}
.day b,.clock .t,.coins{font-family:Narkiss}
/* dish cut-outs are transparent PNGs: show the whole dish on cream, never crop */
.tk .ph{background-color:#F1E8DC;background-size:contain;background-repeat:no-repeat}
.slot .th{background-color:#F1E8DC;background-size:contain;background-repeat:no-repeat}
/* toppings have no photo: a brand chip = cream tile, sauce-colour swatch, price tag */
.tp .ic.chip{background:var(--cream);position:relative}
.tp .ic.chip .sw{width:26px;height:26px;border-radius:50%;background:var(--tc);box-shadow:inset 0 0 0 3px rgba(252,250,248,.9),0 0 0 1px rgba(2,71,59,.18)}
.tp .ic.chip .pr{position:absolute;bottom:-6px;left:50%;translate:-50% 0;font:700 9px/14px Alenbi;font-style:normal;color:#fff;background:var(--red);padding:0 5px;border-radius:7px;direction:ltr;white-space:nowrap}
.tp.on .ic.chip{background:var(--yellow)}
.tp span,.rk span{color:var(--cream)}

/* identity (copied from rakmarak ID-1023): nickname on HUD / result / records — Pasta Basta fonts */
.hud .day .nick{display:block;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 10px Alenbi;color:var(--sage)}
.hud .day .nick:empty{display:none}
.rnick{font:700 15px Narkiss;color:var(--sage);margin:2px 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rnick[hidden]{display:none}
/* FIX1: portrait full-bleed — ui.js fit() sets --ex (side widening, stage px) and --ox/--et/--eb (overlay reach to the viewport edges); all 0 in landscape */
#app .rail,#app .status,#app .dock,#app .picker{left:calc(12px - var(--ex,0px));right:calc(12px - var(--ex,0px))}
#app .rail-h{left:calc(16px - var(--ex,0px));right:calc(16px - var(--ex,0px))}
#app .hud,#app .pausebtn{left:calc(12px - var(--ex,0px))}
#app .overlay{inset:calc(-1 * var(--et,0px)) calc(-1 * var(--ox,0px)) calc(-1 * var(--eb,0px))}