:root{--cream:#fff5dc;--ink:#173e35;--leaf:#28755c;--leaf2:#42a873;--gold:#f3b63f;--orange:#e96b35;--panel:rgba(255,250,232,.94)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#173e35;color:var(--ink);font-family:Nunito,system-ui,sans-serif;user-select:none}
button,a{font:inherit}.warung-shell{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden;isolation:isolate}
[hidden]{display:none!important}.warung-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#a9d9a1;touch-action:none}
.warung-topbar{position:absolute;z-index:12;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;gap:8px;pointer-events:none}
.warung-back,.warung-icon-btn{pointer-events:auto;width:44px;height:44px;border:2px solid rgba(255,255,255,.6);border-radius:15px;background:rgba(18,58,49,.88);color:#fff;display:grid;place-items:center;text-decoration:none;font-size:27px;font-weight:900;box-shadow:0 8px 20px #173e3545;backdrop-filter:blur(10px)}
.warung-icon-btn{font-size:17px}.warung-brand{display:flex;flex-direction:column;line-height:.8;color:#fff;text-shadow:0 2px 0 #173e35}.warung-brand span{font-size:9px;letter-spacing:.28em}.warung-brand b{font:800 20px/1 'Baloo 2';color:#ffe5a2}
.warung-stat{min-width:62px;padding:5px 10px;border:2px solid #ffffff55;border-radius:14px;background:rgba(255,250,232,.9);box-shadow:0 7px 18px #173e3530;text-align:center;line-height:1;backdrop-filter:blur(8px)}
.warung-stat small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#56746a}.warung-stat b{font:800 16px/1.2 'Baloo 2'}.warung-stat--cahaya{background:#fff4c8}.warung-hearts{margin-left:auto;display:flex;gap:2px;color:#e65255;font-size:20px;text-shadow:0 2px 0 #fff}.warung-hearts i{font-style:normal;opacity:.25}.warung-hearts i.hidup{opacity:1}
.warung-order-card{position:absolute;z-index:10;top:74px;left:14px;width:min(310px,42vw);display:grid;grid-template-columns:54px 1fr;gap:8px;padding:10px;border:2px solid #fff9;border-radius:22px;background:var(--panel);box-shadow:0 12px 30px #173e3540;backdrop-filter:blur(10px)}
.warung-face{grid-row:1/3;width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:#f7c762;font-size:30px;box-shadow:inset 0 -5px #d68b3940}
.warung-face.gembira{animation:warung-bounce .45s}.warung-face.sedih{filter:saturate(.5)}.warung-order-copy small{font-size:10px;color:#678078}.warung-order-copy strong{display:block;font:800 clamp(16px,2vw,22px)/1.05 'Baloo 2'}
.warung-order-tags{display:flex;gap:4px;margin-top:3px}.warung-order-tags span{padding:2px 6px;border-radius:99px;background:#dcefe4;font-size:8px;font-weight:900;text-transform:uppercase}.warung-order-tags #warungSedekahTag{background:#fff0b8;color:#895b00}
.warung-patience{grid-column:2}.warung-patience small{font-size:9px}.warung-patience__bar{display:block;height:7px;background:#d9d5c8;border-radius:9px;overflow:hidden}.warung-patience__bar i{display:block;width:100%;height:100%;background:#4fba73;border-radius:inherit;transition:width .15s}.warung-patience__bar i.ketat{background:#f1b63c}.warung-patience__bar i.genting{background:#e85b43}
.warung-mission{position:absolute;z-index:9;top:74px;right:14px;width:min(320px,42vw);padding:9px 12px;border:2px solid #ffffff70;border-radius:18px;background:rgba(23,62,53,.9);color:#fff;box-shadow:0 12px 28px #173e3540}.warung-mission>small{display:block;font-size:8px;letter-spacing:.15em;color:#aee9bb}.warung-mission>strong{font:800 clamp(15px,2vw,21px)/1.1 'Baloo 2';color:#fff0ae}
.warung-steps{display:flex;gap:5px;margin:6px 0 0;padding:0;list-style:none}.warung-steps li{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:#ffffff18;font-size:15px;border:1px solid #ffffff22}.warung-steps li.done{background:#49ad72}.warung-steps li.current{outline:2px solid #ffe074;animation:warung-pulse 1s infinite}
.warung-near{position:absolute;z-index:11;left:50%;bottom:102px;transform:translateX(-50%);padding:7px 14px;border-radius:99px;background:rgba(23,62,53,.92);color:#fff;font-size:12px;box-shadow:0 6px 18px #173e3545;white-space:nowrap}
.warung-controls{position:absolute;z-index:15;inset:auto 0 max(16px,env(safe-area-inset-bottom)) 0;pointer-events:none}.warung-stick{position:absolute;pointer-events:auto;left:max(20px,env(safe-area-inset-left));bottom:0;width:104px;height:104px;border-radius:50%;background:rgba(23,62,53,.34);border:3px solid #fff8;box-shadow:inset 0 0 0 13px #ffffff12;touch-action:none}.warung-stick i{position:absolute;width:48px;height:48px;left:25px;top:25px;border-radius:50%;background:linear-gradient(#fff9,#d4eadb99);border:3px solid #fff;box-shadow:0 5px 12px #173e3560}
.warung-action{position:absolute;pointer-events:auto;right:max(22px,env(safe-area-inset-right));bottom:2px;width:96px;height:96px;border:5px solid #fff8;border-radius:50%;background:linear-gradient(145deg,#ffca55,#e87436);color:#fff;text-shadow:0 2px #a34421;box-shadow:0 8px 0 #9f4d27,0 14px 24px #173e3555;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation}.warung-action span{font-size:31px;line-height:1}.warung-action b{font:900 12px/1 Nunito;letter-spacing:.08em}.warung-action.ready{animation:warung-action 1s infinite}.warung-action:active{transform:translateY(5px);box-shadow:0 3px 0 #9f4d27}
.warung-meter{position:absolute;z-index:18;left:50%;bottom:20px;transform:translateX(-50%);width:min(430px,72vw);padding:12px 15px;border:3px solid #fff;border-radius:20px;background:#173e35eF;color:#fff;text-align:center;box-shadow:0 15px 34px #102c2766}.warung-meter small{font-size:10px;letter-spacing:.1em}.warung-meter__track{position:relative;display:block;height:23px;margin:7px 0;border:3px solid #fff;border-radius:99px;background:#d75b45;overflow:hidden}.warung-meter__zone{position:absolute;top:0;bottom:0;background:#5dce7d}.warung-meter__mark{position:absolute;top:-3px;width:8px;height:29px;margin-left:-4px;border-radius:8px;background:#ffe45c;box-shadow:0 0 8px #fff}.warung-meter button{border:0;border-radius:12px;padding:8px 24px;background:#ffd45c;color:#53320e;font-weight:900}
.warung-screen{position:absolute;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 20%,#3f8e70cc,#123a32ee);overflow:auto}.warung-panel{width:min(640px,100%);padding:24px;border:2px solid #fff8;border-radius:30px;background:linear-gradient(145deg,#fffaf0f2,#f7e6bff2);box-shadow:0 25px 80px #0e30285f, inset 0 1px #fff;text-align:center}.warung-panel--hero{position:relative;overflow:hidden}.warung-panel--hero:before{content:'🍲';position:absolute;right:-20px;top:-30px;font-size:130px;opacity:.08;transform:rotate(15deg)}.warung-panel--small{max-width:430px}.warung-kicker{font-size:10px;font-weight:900;letter-spacing:.2em;color:#398063}.warung-panel h1,.warung-panel h2{margin:3px 0 6px;font:800 clamp(35px,7vw,62px)/.9 'Baloo 2';color:#184c3e}.warung-panel h1 span{color:#e16a34}.warung-panel h2{font-size:36px}.warung-lead,.warung-panel p{margin:7px auto 13px;max-width:540px;font-size:14px;line-height:1.45;color:#4d675f}
.warung-how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}.warung-how span{padding:9px 5px;border-radius:15px;background:#fff9;border:1px solid #dfd3b8}.warung-how i{display:block;font-style:normal;font-size:24px}.warung-how b,.warung-how small{display:block}.warung-how b{font-size:12px}.warung-how small{font-size:9px;color:#74877f}
.warung-recap{display:flex;justify-content:center;gap:8px}.warung-recap span{min-width:82px;padding:6px 10px;border-radius:12px;background:#e5f2df}.warung-recap small,.warung-recap b{display:block}.warung-recap small{font-size:8px;text-transform:uppercase}.warung-primary,.warung-secondary{display:block;width:min(320px,100%);margin:13px auto 7px;padding:13px 20px;border:0;border-radius:16px;font-weight:900;letter-spacing:.04em}.warung-primary{background:linear-gradient(135deg,#f9c24f,#eb7337);color:#fff;box-shadow:0 6px 0 #a94d28}.warung-secondary{background:#dae8df;color:#2c5f50}.warung-note,.warung-berkah{font-size:10px!important;margin:9px auto!important}
.warung-menu-wrap{margin-top:10px}.warung-menu-head{display:flex;justify-content:space-between;font-size:10px}.warung-menu{display:flex;gap:5px;max-height:72px;overflow:auto;padding:5px}.warung-menu i{font-style:normal;padding:4px 7px;border-radius:9px;background:#ddd2bd;color:#8a8174;font-size:9px;white-space:nowrap}.warung-menu i.buka{background:#d5edda;color:#286248}.warung-menu i.baru{outline:2px solid #f2b53e}
.warung-menu {max-height:72px}
.warung-wallet{display:inline-block;padding:7px 15px;border-radius:99px;background:#fff}.warung-shop{display:grid;gap:7px;margin:13px 0}.warung-up{display:flex;align-items:center;gap:10px;padding:9px;border-radius:13px;background:#fff9;text-align:left}.warung-up__text{flex:1}.warung-up__text strong,.warung-up__text small{display:block}.warung-up__text small{font-size:9px}.warung-up__level{display:flex;gap:3px}.warung-up__level i{width:16px;height:4px;background:#d4d4cc}.warung-up__level i.punya{background:#56a873}.warung-up button{border:0;border-radius:10px;padding:8px;background:#2b775d;color:#fff;font-weight:800}.warung-up button:disabled{opacity:.45}
.warung-toast{position:absolute;z-index:40;left:50%;top:50%;transform:translate(-50%,-30%);max-width:min(420px,85vw);padding:10px 16px;border-radius:15px;background:#173e35ed;color:#fff;text-align:center;opacity:0;pointer-events:none;transition:.22s}.warung-toast.show{opacity:1;transform:translate(-50%,-50%)}.warung-pop{position:absolute;z-index:41;left:50%;top:38%;transform:translate(-50%,-50%) scale(.4);font:900 42px 'Baloo 2';color:#fff4a5;text-shadow:0 4px #9b4828,0 8px 22px #173e35;opacity:0;pointer-events:none}.warung-pop.show{animation:warung-pop .85s}.warung-flash{position:absolute;z-index:39;inset:0;background:#ef554455;opacity:0;pointer-events:none}.warung-flash.show{animation:warung-flash .3s}.warung-legacy{display:none}.warung-pad,.warung-item,.warung-wok__pan,.warung-wok__steam,.warung-fly,.warung-ritual__btn{display:none}
@keyframes warung-pop{40%{opacity:1;transform:translate(-50%,-65%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-100%) scale(1)}}@keyframes warung-flash{50%{opacity:1}}@keyframes warung-bounce{50%{transform:translateY(-8px) rotate(-5deg)}}@keyframes warung-pulse{50%{box-shadow:0 0 16px #ffe074}}@keyframes warung-action{50%{transform:scale(1.06);filter:brightness(1.1)}}@keyframes warung-steam{to{transform:translateY(-20px);opacity:0}}
@media(max-width:700px){.warung-brand{display:none}.warung-topbar{gap:5px}.warung-stat{min-width:48px;padding:5px 6px}.warung-stat small{font-size:7px}.warung-stat b{font-size:13px}.warung-order-card{top:65px;width:calc(100% - 108px);max-width:280px}.warung-mission{top:auto;bottom:125px;left:50%;right:auto;transform:translateX(-50%);width:min(330px,74vw);padding:7px 10px}.warung-mission>strong{font-size:14px}.warung-steps{position:absolute;right:8px;top:4px}.warung-steps li{width:23px;height:23px}.warung-near{bottom:108px}.warung-panel{padding:18px}.warung-how small{display:none}}
@media(max-height:700px){.warung-menu{max-height:45px}.warung-panel--hero{padding-top:14px;padding-bottom:14px}.warung-panel h1{font-size:40px}.warung-lead{font-size:12px}.warung-how{margin:8px 0}.warung-recap{display:none}.warung-berkah{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.warung-choices{position:absolute;z-index:19;left:50%;bottom:20px;transform:translateX(-50%);width:min(470px,72vw);padding:11px 14px 13px;border:3px solid #fff;border-radius:22px;background:#173e35f2;color:#fff;text-align:center;box-shadow:0 15px 34px #102c2770}.warung-choices small{display:block;font-size:9px;letter-spacing:.14em;color:#afe7bd}.warung-choices strong{display:block;font:800 17px 'Baloo 2';color:#ffe78a}.warung-choices>div{display:flex;justify-content:center;gap:8px;margin-top:7px}.warung-choices button{min-width:92px;padding:9px 8px;border:2px solid #fff;border-radius:14px;background:#fff4d3;color:#204a3e;font-weight:900;box-shadow:0 4px 0 #b77c3e}.warung-choices button span{display:block;font-size:26px}.warung-choices button.salah{background:#f39a8d;animation:warung-flash .3s}