#bentoGame{position:relative;width:100%;height:100dvh;background:#0d211a;overflow:hidden;color:#fff5db}#bentoGame.active{display:block!important;overflow:hidden!important}#bentoCanvas{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;background:url('assets/bento-clean-food-trays.webp?v=105') center/100% 100%;isolation:isolate}
#bentoGame button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#bentoCanvas>button{position:absolute;margin:0;padding:0;background:transparent;border:0;color:#fff5db;z-index:3;cursor:pointer}#bentoCanvas>button:focus-visible{outline:3px solid #fff;outline-offset:-3px}#bentoCanvas>button[hidden]{display:none!important}.b-logo{position:absolute;left:40.3%;top:0;width:19.5%;height:14.5%;background:url('assets/bento-reference.webp') 50% 0/512.82% 689.66%;pointer-events:none;z-index:1}
.b-nav{position:absolute;left:.7%;top:1%;display:flex;gap:5px;z-index:8}.b-nav button{border-radius:7px;padding:8px 9px;min-height:36px;background:#153b2aee;color:#fff4d7;font-weight:800;font-size:clamp(9px,1vw,14px)}.b-hud{position:absolute;top:1%;right:1%;width:28%;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;z-index:6}.b-hud>*{background:#241a12ec;border:1px solid #c9a04c;padding:5px 7px;border-radius:6px;font-weight:850;font-size:clamp(9px,1.2vw,18px);white-space:nowrap}.b-hud b{color:#ffdc6b}.b-hud #bentoLoss{color:#ff3038;font-size:clamp(16px,2vw,30px)}.b-hud #bentoLoss[hidden]{display:none}.b-hud .lost-cash{color:#ff3038!important}
#bentoGame .b-source.locked:after,#bentoGame .b-cook.locked:after{content:'🔒';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(15px,2vw,30px);line-height:1;background:none;pointer-events:none}#bentoGame .b-source.armed{outline:2px solid #ffda65;outline-offset:-3px;border-radius:8px}.b-cooked{position:absolute;inset:12% 5% 8%;pointer-events:none}.b-cooked .b-food{width:100%;height:100%}.b-cook[data-state=burnt] .b-cooked{filter:brightness(.25)}.b-timer{position:absolute;left:10%;right:10%;top:1%;height:7%;border-radius:8px;background:#141414;border:1px solid #e2dbb7;overflow:hidden;pointer-events:none}.b-timer i{display:block;height:100%;background:#f2d53d}.b-cook[data-state=ready] .b-timer i{background:#75d534}.b-cook[data-state=burnt] .b-timer{background:#e93629}#bentoGame [hidden]{display:none!important}
.b-food{display:inline-block;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;width:35px;height:29px;flex-shrink:0}.b-food.b-rice{background:none}.b-food.b-drink{background:linear-gradient(to top,var(--juice) 0 80%,#eafaff 80% 90%,transparent 90%);border:1px solid #f0ffff;clip-path:polygon(10% 0,90% 0,76% 100%,24% 100%);width:21px;height:31px}.b-cup{overflow:hidden;clip-path:polygon(0 0,100% 0,84% 100%,16% 100%)}.b-liquid{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--juice);opacity:1;pointer-events:none}
#bentoGame .b-box{z-index:4;border-radius:5px}#bentoGame .b-box[aria-pressed=true]{outline:2px solid #ffdf55;outline-offset:2px}#bentoGame .b-box:before{content:attr(data-box);display:none}.b-box>.b-drink{position:absolute;left:102%;bottom:2%;width:20%;height:85%}.b-packed{display:block;position:relative;width:100%;height:100%;pointer-events:none}.b-packed .b-food{position:absolute;left:57%;top:47%;width:40%;height:47%}.b-packed .b-rice{left:1%;top:8%;width:54%;height:87%}.b-packed .b-food[data-food=furikake]{left:15%;top:15%;width:24%;height:30%;border-radius:40%}.b-packed .b-food[data-food=takuan]{left:31%;top:63%;width:22%;height:32%}.b-packed .b-food[data-food=onion]{left:77%;top:2%;width:20%;height:33%}.b-packed .b-food[data-food=sauce]{left:65%;top:65%;width:28%;height:20%}.b-packed .b-food:not(.b-rice):not([data-food=furikake]):not([data-food=takuan]):not([data-food=onion]):not([data-food=sauce])~.b-food:not(.b-rice):not([data-food=furikake]):not([data-food=takuan]):not([data-food=onion]):not([data-food=sauce]){left:58%;top:2%;width:39%;height:39%}
#bentoGame .b-customer{z-index:2;overflow:visible;color:#21372a}.b-person{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:auto;aspect-ratio:1;max-width:100%;height:72%;background-size:300% 200%;background-repeat:no-repeat;pointer-events:none}.b-dasher{position:absolute;right:-5%;bottom:42%;font-size:clamp(24px,3vw,45px);z-index:4;pointer-events:none}.b-customer.paying .b-person{opacity:0;transition:opacity .3s}.b-cash{display:flex;align-items:center;justify-content:center;min-width:85%;min-height:clamp(40px,5vw,65px);border:3px double #9d670c;border-radius:5px;color:#593700;background:linear-gradient(135deg,#fff2a3,#ffd34d 45%,#e6a820);font-weight:900;font-size:clamp(19px,2.5vw,36px);box-shadow:0 3px 0 #8e5d0b;transform:rotate(-5deg)}.b-tip{background:#ffcf24;color:#302006;font-size:clamp(10px,1.2vw,17px);font-weight:900;padding:3px 6px;border-radius:5px}.b-loss{font-size:clamp(24px,3vw,42px);font-weight:900;color:#ff0000}.b-customer.dashing{animation:bento-dash 2.4s ease-in both}.b-customer.leaving{opacity:0;transition:opacity .6s;pointer-events:none}@keyframes bento-dash{0%,45%{opacity:1;transform:none}100%{opacity:0;transform:translateX(50%)}}
#bentoToast{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);max-width:63%;padding:8px 14px;background:#142e24ef;color:#ffe18b;border:1px solid #d8b553;border-radius:9px;font-size:clamp(10px,1.2vw,17px);font-weight:800;text-align:center;z-index:9;pointer-events:none}.b-overlay{position:absolute;inset:0;z-index:20;background:#08291ac7;display:flex;align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(4px)}.b-card{background:#fff5dd;color:#203e2c;border:3px solid #ddba59;border-radius:22px;padding:20px 28px;max-width:620px;width:82%;max-height:94%;overflow:auto;text-align:center;box-shadow:0 15px 60px #0006}.b-card>span{font-size:11px;letter-spacing:2px;font-weight:850;color:#846625}.b-card h1{font-size:clamp(24px,3.3vw,42px);margin:8px}.b-card p{font-size:clamp(12px,1.5vw,17px);line-height:1.5;margin:12px 0}.b-card button{background:#ffcf32;color:#233e2b;font-weight:850;min-height:44px;padding:12px 20px;margin:5px;border-radius:10px}.b-card #bentoSecondary{background:#1d422e;color:#fff0cc}@media(max-height:450px){.b-card{padding:12px 24px}.b-card p{line-height:1.35;margin:8px 0}.b-nav button{min-height:32px;padding:5px 7px}}@media(prefers-reduced-motion:reduce){.b-customer.dashing{animation:none}}
body[data-screen=bentoGame] #musicToggle{top:auto!important;bottom:8px!important;right:8px!important;height:34px!important;min-height:34px!important;width:100px!important;font-size:11px!important}body[data-screen=bentoGame] #fullscreenBtn{top:auto!important;bottom:8px!important;left:14%!important;height:34px!important;font-size:11px!important}

/* Contain the source artwork inside each slot; never stretch food to its bounds. */
.b-food>svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.b-cooked{inset:16% 8% 10%}.b-fryer .b-cooked{inset:16% 5% 9%;display:flex;align-items:center;justify-content:center}.b-fryer .b-food[data-food=fish],.b-fryer .b-food[data-food=shrimp]{position:absolute;width:165%;height:62%;left:-32.5%;top:19%;transform:rotate(-75deg);transform-origin:center}.b-fryer .b-food[data-food=garlic],.b-fryer .b-food[data-food=thigh]{height:75%;align-self:center}.b-box>.b-drink{border-width:2px}

.b-food>img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:1;pointer-events:none}.b-fryer .b-food[data-food=garlic]{position:absolute;left:5%;top:10%;width:90%;height:80%;transform:none}.b-drink-liquid-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}.b-drink-liquid-layer *{pointer-events:none}

/* Food stays within the actual inner rim, leaving the drink beside the box. */
.b-box>.b-packed{overflow:hidden;clip-path:polygon(11% 12%,92% 12%,96% 74%,6% 74%)}.b-box .b-packed .b-rice{left:10%;top:14%;width:48%;height:60%}.b-box .b-packed .b-food[data-food=takuan]{left:42%;top:47%;width:15%;height:25%}.b-box .b-packed .b-food[data-food=furikake]{left:19%;top:17%;width:22%;height:20%}.b-box .b-packed .b-food[data-food=onion]{left:76%;top:14%;width:15%;height:15%}.b-box .b-packed .b-food[data-food=sauce]{left:65%;top:57%;width:22%;height:10%}.b-box .b-packed .b-food:not(.b-rice):not([data-food=furikake]):not([data-food=takuan]):not([data-food=onion]):not([data-food=sauce]){left:61%;top:42%;width:30%;height:30%}.b-box .b-packed .b-food:not(.b-rice):not([data-food=furikake]):not([data-food=takuan]):not([data-food=onion]):not([data-food=sauce])~.b-food:not(.b-rice):not([data-food=furikake]):not([data-food=takuan]):not([data-food=onion]):not([data-food=sauce]){left:61%;top:13%;width:30%;height:28%}
.b-fryer .b-cooked{overflow:hidden;clip-path:polygon(5% 0,95% 0,90% 98%,10% 98%)}.b-fryer .b-food[data-food=fish]{position:absolute;left:10%;top:3%;width:80%;height:91%;transform:none}.b-food[data-food=fish]>img{aspect-ratio:2 / 3;object-fit:contain}
/* A modest size increase, with identical trays and preserved inner boundaries. */
#bentoGame .b-box{height:auto!important;aspect-ratio:296 / 96;width:16.4%!important}.b-box-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:polygon(10% 0,96% 0,100% 83%,98% 99%,2% 99%,0 83%)}.b-box>.b-packed{position:absolute;inset:0}
.b-box .b-packed .b-rice{left:8%;top:11%;width:51%;height:65%;transform:scale(1.08);transform-origin:center}.b-box .b-packed .b-food[data-food=takuan]{left:40%;top:45%;width:18%;height:28%}.b-box .b-packed .b-food[data-food=furikake]{left:18%;top:16%;width:25%;height:23%}.b-box .b-packed .b-food[data-food=onion]{left:74%;top:14%;width:18%;height:19%}.b-box .b-packed .b-food:not(.b-rice):not([data-food=furikake]):not([data-food=takuan]):not([data-food=onion]):not([data-food=sauce]){left:59%;top:39%;width:34%;height:35%}.b-box .b-packed .b-food:not(.b-rice):not([data-food=furikake]):not([data-food=takuan]):not([data-food=onion]):not([data-food=sauce])~.b-food:not(.b-rice):not([data-food=furikake]):not([data-food=takuan]):not([data-food=onion]):not([data-food=sauce]){left:59%;top:12%;width:34%;height:31%}.b-box .b-food[data-food=fish]>img{transform:rotate(70deg) scale(1.15);transform-origin:center}.b-fryer .b-food[data-food=garlic]{left:2%;top:6%;width:96%;height:88%}.b-fryer .b-food[data-food=fish]{left:6%;top:2%;width:88%;height:95%}


/* The sharp final background already includes the original brand sign. */
#bentoGame .b-logo{display:none}

/* Show the complete tray rim; only the contents use an inner boundary. */
.b-box-art{clip-path:none;overflow:visible}.b-protein-slot{position:absolute;display:block;pointer-events:none;z-index:2}.b-packed .b-protein-slot>.b-food{position:absolute!important;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important}.b-onion-sprinkle{position:absolute;left:14%;top:12%;width:72%;height:58%;object-fit:contain;z-index:4;pointer-events:none}.b-packed .b-protein-slot>.b-food[data-food=fish]>img{transform:rotate(75deg) scale(1.55);transform-origin:center;object-fit:contain}.b-fryer .b-food[data-food=fish]{left:-20%;top:-2%;width:140%;height:112%;transform:none}.b-fryer .b-food[data-food=fish]>img{transform:none;object-fit:contain}.b-packed[data-proteins="3"]>.b-rice,.b-packed[data-proteins="4"]>.b-rice{left:10%;top:10%;width:44%;height:51%;transform:none}

/* Generous portions overlap inside the box rather than shrinking each addition. */
.b-box>.b-packed{clip-path:polygon(7% 7%,94% 7%,98% 84%,3% 84%)}.b-packed[data-proteins="3"]>.b-rice,.b-packed[data-proteins="4"]>.b-rice{left:8%;top:11%;width:51%;height:65%;transform:scale(1.08)}#bentoGame #bentoSample{position:relative!important;width:min(100%,480px)!important;height:auto!important;aspect-ratio:296 / 96;margin:10px auto 14px;pointer-events:none}#bentoGame .b-card:has(#bentoSample:not([hidden])){max-width:700px;padding:14px 24px}#bentoSample .b-box-art{clip-path:none}#bentoGame #bentoSample[hidden]{display:none!important}.b-nav #bentoGuide{background:#eed28a;color:#26392b}

/* Reserve a visible rice area and render seasoning directly over the rice. */
.b-rice-bed{position:absolute;left:7%;top:13%;width:38%;height:54%;z-index:3;pointer-events:none}.b-packed .b-rice-bed>.b-rice{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important}.b-rice-bed .b-furikake-sprinkle{position:absolute;left:13%;top:18%;width:74%;height:51%;object-fit:contain;z-index:5;pointer-events:none}.b-rice-bed>.b-rice>img{aspect-ratio:auto;object-fit:contain}.b-packed[data-proteins="5"]>.b-rice-bed,.b-packed[data-proteins="6"]>.b-rice-bed,.b-packed[data-proteins="7"]>.b-rice-bed{top:10%;height:36%}.b-packed>.b-food[data-food=takuan],.b-box .b-packed>.b-food[data-food=takuan]{left:9%;top:66%;width:18%;height:17%;z-index:4}
/* Every fryer sprite is contained upright in its own basket, without a tray crop. */
.b-fryer .b-food[data-food=shrimp],.b-fryer .b-food[data-food=thigh]{position:absolute;left:2%;top:2%;width:96%;height:94%;transform:none;display:block}.b-fryer .b-food[data-food=shrimp]>img,.b-fryer .b-food[data-food=thigh]>img{width:100%;height:100%;object-fit:contain;transform:none;aspect-ratio:auto}.b-packed .b-protein-slot>.b-food[data-food=shrimp]>img{transform:rotate(75deg) scale(1.3);object-fit:contain;aspect-ratio:auto}.b-packed .b-protein-slot>.b-food[data-food=thigh]>img{transform:rotate(65deg) scale(1.12);object-fit:contain;aspect-ratio:auto}

/* One round, flat-bottom scoop; bold black furikake remains clearly visible. */
.b-rice-bed{left:8%;top:8%;width:36%;height:70%}.b-rice-bed .b-furikake-sprinkle{left:10%;top:20%;width:80%;height:45%;z-index:6}.b-packed[data-proteins="5"]>.b-rice-bed,.b-packed[data-proteins="6"]>.b-rice-bed,.b-packed[data-proteins="7"]>.b-rice-bed{top:8%;height:39%}.b-packed>.b-food[data-food=takuan],.b-box .b-packed>.b-food[data-food=takuan]{left:8%;top:64%;width:20%;height:19%;z-index:4}.b-food[data-food=beef]>img{object-fit:contain;aspect-ratio:auto;transform:none}

.b-teriyaki-drizzle{position:absolute;left:8%;top:16%;width:84%;height:64%;object-fit:contain;z-index:3;pointer-events:none}.b-onion-sprinkle{z-index:4}
/* Tempura remains visibly longer than a Spam slice at the same serving scale. */
.b-packed .b-protein-slot>.b-food[data-food=shrimp]>img{transform:rotate(75deg) scale(2.2);transform-origin:center;object-fit:contain;aspect-ratio:auto}

/* Keep the front table clear of instructional text and hover descriptions. */
#bentoGame #bentoToast{display:none!important}#bentoGame .b-card:has(#bentoSample:not([hidden])) #bentoDescription{display:none}.b-food[data-food=spam]>img,.b-food[data-food=hotdog]>img,.b-food[data-food=takuan]>img{aspect-ratio:auto;object-fit:contain;transform:none}

/* High contrast seasoning is concentrated on the crown of the rice scoop. */
.b-rice-bed .b-furikake-sprinkle{left:22%;top:13%;width:56%;height:37%;z-index:6;object-fit:fill}

/* Larger seafood portions with a distinct curled shrimp silhouette. */
.b-packed .b-protein-slot>.b-food[data-food=fish]>img{transform:rotate(75deg) scale(1.8)}
.b-packed .b-protein-slot>.b-food[data-food=shrimp]>img{transform:scale(1.3);object-fit:contain;aspect-ratio:auto}
.b-fryer .b-food[data-food=shrimp]{left:-4%;top:-4%;width:108%;height:108%}

/* A whole thigh stays broad and distinct from bite-size garlic chicken. */
.b-packed .b-protein-slot>.b-food[data-food=thigh]>img{transform:scale(1.08);object-fit:contain;aspect-ratio:auto}

/* Use the same single striped Spam slice in the ingredient tray and orders. */
.b-spam-source{position:absolute;left:3%;top:3%;width:94%;height:64%;display:flex;align-items:center;justify-content:center;background:none;clip-path:none;pointer-events:none}
.b-spam-source>.b-food{width:78%;height:93%}.b-spam-source>.b-food>img{object-fit:contain;aspect-ratio:auto;transform:none}

/* Show the complete long shrimp and its red tail in every context. */
.b-packed .b-protein-slot>.b-food[data-food=shrimp]>img{transform:scale(1.15);object-fit:contain;aspect-ratio:auto}
.b-fryer .b-food[data-food=shrimp]{left:-32%;top:20%;width:164%;height:58%;transform:rotate(-75deg);transform-origin:center}
.b-fryer .b-food[data-food=shrimp]>img{transform:none;object-fit:contain}

/* Keep faces beside their tickets and all orders above the cooking surface. */
#bentoGame .b-customer{overflow:hidden}
#bentoGame .b-customer .b-person{left:23%;bottom:0;height:92%;max-width:55%;z-index:1}
#bentoGame .b-customer .b-dasher{right:auto;left:0;bottom:55%}
/* A white-boned drumstick stays distinct from the fish at every serving size. */
#bentoGame .b-food[data-food=thigh]>img{aspect-ratio:auto;object-fit:contain;transform:none}
#bentoGame .b-packed .b-protein-slot>.b-food[data-food=thigh]>img{transform:none}
#bentoGame .b-fryer .b-food[data-food=thigh]{left:-24%;top:24%;width:148%;height:52%;transform:rotate(-65deg);transform-origin:center}
#bentoGame .b-source[data-food=thigh] .b-spam-source{left:1%;width:98%;height:70%}
#bentoGame .b-source[data-food=thigh] .b-spam-source>.b-food{width:94%;height:98%}
/* Separate top order strip and lower portrait; neither extends over the grill. */
#bentoGame .b-customer .b-person{left:50%;bottom:0;height:67%;width:auto;max-width:100%;aspect-ratio:1;z-index:1}
#bentoGame .b-customer .b-dasher{left:2%;bottom:35%}
/* The white ticket hugs the icons; money uses a separate{width:fit-content;min-width:0;max-width:96%;height:fit-content;min-height:0;padding:2px 3px 6px;gap:2px;box-shadow:none}
#bentoGame .b-customer.paying{overflow:visible;z-index:7}
#bentoGame .b-customer.paying .b-cash{width:auto;min-width:0;max-width:none;height:auto;min-height:40px;padding:4px 10px;white-space:nowrap;flex:none;font-size:clamp(18px,2.3vw,32px);line-height:1.2;overflow:visible}
#bentoGame .b-customer.paying .b-tip{flex:none;white-space:nowrap;font-size:clamp(9px,1vw,14px);padding:2px 5px}
/* Explicit icon dimensions avoid percentage-height collapse on mobile browsers. */
#bentoGame .b-customer .b-order{--order-icon:clamp(20px,2.2vw,31px);position:absolute;left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);box-sizing:border-box;width:calc(var(--order-count,2) * (var(--order-icon) + 2px) + 6px);max-width:96%;height:calc(var(--order-icon) + 10px);min-height:calc(var(--order-icon) + 10px);max-height:none;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:2px;padding:2px 3px 6px;overflow:hidden;background:#505650;border:1px solid #d5c9a9;border-radius:6px;z-index:2;pointer-events:none}
#bentoGame .b-order>.b-food{display:block;flex:0 1 var(--order-icon);width:var(--order-icon);height:var(--order-icon);min-height:var(--order-icon);max-height:none;min-width:0;margin:0}
#bentoGame .b-order>.b-food>img{display:block;width:100%;height:var(--order-icon);min-height:var(--order-icon);max-height:none;object-fit:contain;transform:none!important;aspect-ratio:auto}
#bentoGame .b-order-names{display:none}
#bentoGame .b-wait{display:block;position:absolute;left:3%;bottom:2px;width:94%;height:3px;overflow:hidden;background:#282722;border-radius:3px}
#bentoGame .b-wait i{display:block;height:3px;transition:width .1s linear}
#bentoGame .b-customer.paying .b-order{width:max-content;max-width:none;height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;align-items:center;padding:0;overflow:visible;background:transparent;border:0;gap:3px}
#bentoGame .b-customer.dashing .b-order{width:96%;height:auto;min-height:0;flex-direction:column;color:#ff3434}
/* Keep each food readable by splitting long tickets over two rows. */
#bentoGame .b-customer[data-order-dense=true]{--dense-icon:clamp(18px,2.2vw,31px)}
#bentoGame .b-customer[data-order-dense=true]:not(.paying):not(.dashing) .b-order{--order-icon:var(--dense-icon);display:grid;grid-template-columns:repeat(var(--order-columns),minmax(0,1fr));grid-template-rows:repeat(2,var(--order-icon));width:calc(var(--order-columns) * (var(--order-icon) + 2px) + 6px);height:calc(2 * var(--order-icon) + 12px);min-height:calc(2 * var(--order-icon) + 12px);gap:2px}
#bentoGame .b-customer[data-order-dense=true] .b-order>.b-food{width:100%}
#bentoGame .b-customer[data-order-dense=true] .b-person{height:calc(100% - 2 * var(--dense-icon) - 16px)}
/* The drumstick has genuine transparency; no dark film behind it. */
#bentoGame .b-source[data-food=thigh] .b-spam-source{background:none;clip-path:none;box-shadow:none}
/* Fit the complete drumstick, including its white bone, inside the fryer. */
#bentoGame .b-fryer .b-food[data-food=thigh]{left:-35%;top:27%;width:170%;height:45%;transform:rotate(-85deg);transform-origin:center}
#bentoGame .b-fryer .b-food[data-food=thigh]>img{object-fit:contain;transform:none;aspect-ratio:auto}
