#app[data-game=cafe]{height:100dvh;overflow:hidden;background:radial-gradient(ellipse at top,#f4ede4,#dab78d);font-family:Nunito,'Trebuchet MS',sans-serif;color:#633d2c}
#app[data-game=cafe]>header,#app[data-game=cafe]>.bottom-nav{display:none}
#app[data-game=cafe]>main{height:100%;width:100%;max-width:460px;margin:auto;padding:0 7px 7px;display:flex;flex-direction:column;background:linear-gradient(#f1f9fc 0%,#f8ead1 32%,#d9a66e);box-shadow:0 0 40px #7953352b}
.cafe-top{display:flex;align-items:center;justify-content:space-between;gap:5px;flex:0 0 72px;padding:4px 6px}
.cafe-top h1{font:1000 25px/1.04 Nunito,'Trebuchet MS',sans-serif;letter-spacing:-.8px;margin:0;text-align:center;color:#633b28;text-shadow:0 2px #fff}.cafe-top h1 span{display:block;font-size:28px}
.cafe-nav{min-width:35px;min-height:35px;font-size:22px;line-height:1;border:2px solid #fff8e5;border-radius:12px;color:#7b5133;background:linear-gradient(#fffdf5,#f0dfbf);box-shadow:0 3px 0 #ac8052,0 4px 6px #5e3b2330}
.cafe-layout.game-layout{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 110px 23px 35px;gap:4px;margin:0;padding:0}
.cafe-stage{position:relative;min-height:0;overflow:hidden;border-radius:19px 19px 4px 4px;background:#b87d42 url('assets/cafe-interior.png') center/100% 100% no-repeat;box-shadow:0 3px 0 #8b562e;isolation:isolate}
.cafe-hud{position:absolute;top:2%;left:5%;right:5%;height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:5}
.cafe-day{white-space:nowrap;font-size:13px;font-weight:1000;color:#fff5d4;text-shadow:0 2px 2px #6c381d}.cafe-day b{color:#ffd13e;font-size:27px;vertical-align:middle;text-shadow:0 1px #a26525}.cafe-hud .cafe-nav{min-height:31px;min-width:31px;font-size:22px;background:#94623e;color:#fff5d9;border-color:#c59563;box-shadow:0 2px #663f27}
.cafe-gift-progress{position:relative;display:flex;align-items:center;justify-content:space-around;flex:1;max-width:205px;height:15px;border-radius:14px;border:2px solid #fff2c9;background:#936e44;box-shadow:0 2px 1px #764b27}.cafe-gift-progress i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(#fff09e,#ffc537);border-radius:14px;transition:width .35s}.cafe-gift-progress span{position:relative;color:#ee717a;z-index:1;font-size:24px;text-shadow:0 1px #fff,1px 0 #fff,-1px 0 #fff,0 -1px #fff}
.cafe-stage #play-area{position:absolute;inset:0}
.cafe-customers{position:absolute;left:1%;right:1%;top:12%;height:35%;display:flex;align-items:stretch;z-index:2;gap:0}
.cafe-customer{position:relative;flex:1;min-width:0;height:100%}
.cafe-person{position:absolute;bottom:0;left:-3%;width:106%;height:76%;background:url('assets/cafe-customers.png') no-repeat;background-size:400% 300%;filter:drop-shadow(0 2px 2px #45281840);pointer-events:none}
.request-bubble{position:absolute;left:18%;top:0;width:64%;height:33%;min-height:43px;max-height:74px;border-radius:19px;background:linear-gradient(#fffefb,#fff8ed);border:1px solid #fffaf3;padding:4px;box-shadow:0 3px 5px #482c1f40;z-index:3}
.request-bubble:after{content:'';position:absolute;width:13px;height:13px;background:#fff8ed;left:37%;bottom:-6px;transform:rotate(45deg);border-radius:2px;z-index:-1}
.cafe-item-art{display:block;width:100%;height:100%;aspect-ratio:1;background:url('assets/cafe-objects.png') no-repeat;background-size:400% 400%;filter:drop-shadow(0 2px 1px #5d3b2838);pointer-events:none}
.request-bubble .cafe-item-art{width:auto;height:100%;aspect-ratio:1;margin:auto}
.customer-heart{position:absolute;bottom:-2px;left:13%;width:74%;height:17px;line-height:15px;border:2px solid #fff5e3;border-radius:8px;background:#f7ebdb;box-shadow:0 2px 1px #895b35;font-size:12px;letter-spacing:3px;text-align:center;color:#e8a299;z-index:4}
.customer-happy .customer-heart{color:#f15d5e}.customer-happy .request-bubble{background:#fff9e8}.request-thanks{font-size:9px;font-weight:1000;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#72513b}.request-thanks b{font-size:24px;color:#ef7279;margin-top:3px}
.cafe-counter-items{position:absolute;left:2%;right:2%;top:49%;bottom:1%;z-index:3;isolation:isolate}
.cafe-lost-item{position:absolute;width:var(--item-size);min-width:44px;min-height:44px;aspect-ratio:1;padding:0;border:0;border-radius:0;background:none;transform:translate(-50%,-50%) rotate(var(--item-angle));touch-action:manipulation;transition:opacity .25s,filter .2s}
.cafe-lost-item:hover{filter:drop-shadow(0 0 5px #fff3a0)}.cafe-lost-item:focus-visible{outline:2px solid #fff7bd;border-radius:12px}.cafe-lost-item.returned-item{opacity:0;pointer-events:none}.cafe-lost-item.cafe-hinted{filter:drop-shadow(0 0 4px #ffed72) drop-shadow(0 0 5px #fff);outline:2px dashed #ffe3a1;outline-offset:-6px;border-radius:20px;z-index:8}
.cafe-targets.tray{display:flex;flex-direction:column;flex-wrap:nowrap;padding:5px 10px;margin:0;gap:0;min-height:0;overflow:hidden;background:linear-gradient(#fffbed,#f7e4c7);border:3px solid #fff6df;border-radius:17px;box-shadow:0 3px 0 #a16b3d}
.cafe-target-heading{display:flex;align-items:center;justify-content:space-between;height:21px;font-size:12px}.cafe-target-heading button{width:23px;height:23px;background:#bc7943;color:#fff9e7;border-radius:6px;font-size:21px;line-height:1;box-shadow:inset 0 1px #e7bb78}
.cafe-target-list{display:flex;flex:1;min-height:0;gap:7px;align-items:stretch}.cafe-target{flex:1;min-width:0;padding:0 5px;display:flex;flex-direction:column;align-items:center;border:0;border-radius:11px;background:#eedbbf80;box-shadow:none}.cafe-target .cafe-item-art{width:58px;height:58px;max-height:calc(100% - 16px);flex:1;max-width:100%}.cafe-target>span:last-child{height:16px;font-size:11px;font-weight:1000;color:#744631;white-space:nowrap}.cafe-target.target-done{background:#d9e7c2}.cafe-target.target-done>span:last-child{color:#5a7a39}
.cafe-layout .hint-note{min-height:0;margin:0;text-align:center;align-self:center;font:800 10px/12px Nunito,sans-serif;color:#6f432b;overflow:hidden}
.cafe-layout .tools{display:flex;gap:7px;margin:0;min-height:0}.cafe-layout .tools .quiet{flex:1;min-height:32px;padding:3px 7px;border:2px solid #fff3dd;border-radius:11px;background:linear-gradient(#fff8e9,#efd7b5);box-shadow:0 2px #a87442;color:#7a5030;font:900 11px Nunito,sans-serif}.cafe-layout .tools .primary{flex:1;min-height:32px;padding:4px 7px;font-size:12px;border-radius:11px;background:#885b35;color:#fff9e8}
@media(max-height:680px){.cafe-top{flex-basis:57px}.cafe-top h1{font-size:21px}.cafe-top h1 span{font-size:23px}.cafe-layout.game-layout{grid-template-rows:minmax(0,1fr) 94px 20px 32px;gap:3px}.cafe-target .cafe-item-art{width:48px;height:48px}.cafe-customers{top:14%;height:35%}.cafe-counter-items{top:51%}.request-bubble{min-height:35px;height:30%;border-radius:14px}}
@media(orientation:landscape) and (max-height:550px){#app[data-game=cafe]>main{max-width:900px;flex-direction:row;gap:8px}.cafe-top{flex:0 0 150px;flex-wrap:wrap;justify-content:center;align-content:center}.cafe-top h1{order:-1;width:100%;margin-bottom:12px}.cafe-layout.game-layout{grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:minmax(0,1fr) 40px 35px}.cafe-stage{grid-column:1;grid-row:1/4}.cafe-targets.tray{grid-column:2;grid-row:1}.cafe-target-list{flex-direction:column;gap:3px}.cafe-target{flex-direction:row;justify-content:space-around}.cafe-target .cafe-item-art{flex:none;width:45px;height:45px;max-height:100%}.cafe-target-heading{font-size:10px}.cafe-layout .hint-note{grid-column:2;grid-row:2}.cafe-layout .tools{grid-column:2;grid-row:3;gap:4px}.cafe-layout .tools .quiet{font-size:10px;padding:2px}}
.cafe-person{width:auto;aspect-ratio:1;height:76%;left:50%;transform:translateX(-50%)}

.cafe-gift svg{display:block;width:25px;height:29px;filter:drop-shadow(0 2px 1px #61402455)}.cafe-gift-progress .cafe-gift{width:25px;height:29px;line-height:1}.gift-earned svg{filter:drop-shadow(0 0 3px #ffe69e)}

/* Keep the existing portraits square in every viewport. */
.cafe-person{width:auto;height:75%;aspect-ratio:1;left:50%;transform:translateX(-50%);background-size:400% 300%}
.cafe-counter-backwall{position:absolute;left:0;right:0;top:46.5%;height:9%;z-index:1;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 3px),#75412099 calc(20% - 3px) calc(20% - 1px),#efb97577 calc(20% - 1px) 20%),repeating-linear-gradient(88deg,#ffffff08 0 2px,#50290d08 3px 5px),linear-gradient(#af6b34,#b97c45 32%,#c38a4e 85%,#875125);box-shadow:inset 0 7px 9px #48220d77,inset 0 -3px 2px #693715aa,0 5px 7px #542b1655}
.cafe-counter-backwall:before{content:'';position:absolute;left:0;right:0;top:-8px;height:13px;border-top:2px solid #f3c17d;border-bottom:3px solid #8a4a23;border-radius:3px;background:linear-gradient(#efb574,#ce8d4d 45%,#a76330 55%,#c98a4b);box-shadow:0 5px 5px #3f1d1566}
.cafe-counter-sidewalls{position:absolute;left:0;right:0;top:47%;bottom:0;z-index:2;border-left:8px solid #ad713a;border-right:8px solid #a56732;border-bottom:8px solid #874c26;box-shadow:inset 4px 1px 7px #50281377,inset -4px 0 7px #50281377,0 -1px 0 #e5af69;pointer-events:none}
.cafe-counter-items{left:3%;right:3%;top:53%;bottom:2%;z-index:3}
.cafe-lost-item{filter:drop-shadow(1px 3px 2px #542a1b55)}
.request-bubble{display:flex;align-items:center;justify-content:center;padding:3px;gap:0;height:33%;width:70%;left:15%}
.request-bubble>button{display:block;min-width:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none}
.request-bubble>button .cafe-item-art{width:auto;max-width:100%;height:100%;aspect-ratio:1;margin:auto;transform:scale(1.18)}
.request-bubble.multiple-requests{width:84%;left:8%;gap:0}.request-bubble.multiple-requests>button{width:50%;height:82%}
.cafe-targets.tray{border-radius:14px;border-width:3px;padding:5px 9px;gap:0;box-shadow:0 2px 0 #b07743}
.cafe-target-list{gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.cafe-target{padding:0;min-width:53px;border-radius:10px;background:#eed8b9;position:relative;overflow:hidden}
.cafe-target .cafe-item-art{width:78px;height:72px;max-height:calc(100% - 16px);flex:none;max-width:110%;transform:scale(1.13)}
.cafe-target>span:last-child{font-size:12px;font-weight:1000;color:#6b3c27}
@media(max-height:680px){.cafe-counter-items{top:53%}.cafe-person{height:75%}.cafe-target .cafe-item-art{width:60px;height:55px}}
@media(orientation:landscape) and (max-height:550px){.cafe-target .cafe-item-art{width:46px;height:46px;max-width:46px;max-height:46px}.cafe-target-list{overflow-y:auto;overflow-x:hidden}.cafe-counter-backwall{height:9%}}
.cafe-lost-item{width:calc(var(--item-size)*.65)}.cafe-lost-item>.cafe-item-art{position:absolute;width:154%;height:154%;left:-27%;top:-27%}

.customer-departed{pointer-events:none}
.cafe-thanks-floating{position:absolute;top:30%;left:-8%;right:-8%;height:65%;text-align:center;pointer-events:none;z-index:9;animation:cafe-thanks-fade 1.7s ease-out both;background:none!important;border:0;box-shadow:none}
.cafe-thanks-floating strong{display:block;font:1000 clamp(16px,4vw,23px) Nunito,sans-serif;color:#fff3d9;text-shadow:0 2px 3px #714126,0 0 5px #925c31}
.cafe-thanks-floating i{position:absolute;left:43%;top:40%;color:#f47d8a;font-style:normal;font-size:27px;text-shadow:0 1px #fff0d9;animation:cafe-heart-float 1.5s ease-out both}
.cafe-thanks-floating i:nth-of-type(1){left:20%;animation-delay:.1s;--heart-drift:-17px}.cafe-thanks-floating i:nth-of-type(2){left:43%;font-size:34px;--heart-drift:3px}.cafe-thanks-floating i:nth-of-type(3){left:68%;animation-delay:.2s;--heart-drift:19px}
@keyframes cafe-heart-float{0%{opacity:0;transform:translate(0,15px) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translate(var(--heart-drift),-65px) scale(1.1)}}
@keyframes cafe-thanks-fade{0%{opacity:0;transform:translateY(8px)}15%,65%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
#cafe-complete{max-width:350px;width:calc(100vw - 38px);padding:26px 21px 22px;border:4px solid #fff4d9;border-radius:25px;text-align:center;background:radial-gradient(ellipse at top,#fffdf3,#f4ddba);box-shadow:0 8px 0 #8d5b36,0 15px 45px #43200d55;color:#71482f;font-family:Nunito,'Trebuchet MS',sans-serif}
#cafe-complete::backdrop{background:#422b226e;backdrop-filter:blur(3px)}#cafe-complete h2{font:1000 28px/1.1 Nunito,sans-serif;margin:12px 0}#cafe-complete .eyebrow{font-size:10px;color:#aa7545;letter-spacing:2px}.cafe-complete-hearts{font-size:36px;color:#ec8590;text-shadow:0 2px #fff}.cafe-complete-note{font-size:12px;color:#9a714f}#cafe-complete .primary,#cafe-complete .quiet{display:block;width:100%;margin-top:10px;border-radius:13px;font-weight:900}#cafe-complete .primary{background:linear-gradient(#c28a4f,#9d693d);border:2px solid #fff0d4;box-shadow:0 3px #82532f;color:#fff9eb;font-size:17px;padding:12px}#cafe-complete .quiet{background:transparent;color:#8d633f;border:0}
@media(prefers-reduced-motion:reduce){.cafe-thanks-floating{animation:cafe-thanks-fade 1.7s linear both;transform:none}.cafe-thanks-floating i{animation:none;opacity:1}}