.herbal-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:rgba(6,12,9,.86);backdrop-filter:blur(4px);overflow:auto}
.herbal-dialog{--herb-color:#96bb76;box-sizing:border-box;width:min(100%,460px);max-height:95dvh;overflow:auto;padding:24px;background:radial-gradient(ellipse at 50% 35%,#24352b 0,#111d19 65%);border:1px solid #718162;box-shadow:0 0 0 4px #0b1510,0 20px 90px #000;color:#ece4cf;text-align:center;border-radius:10px}
.herbal-dialog h2{font-family:Forum,Georgia,serif;font-size:29px;margin:10px 0 8px;color:#ecdfb6}.herbal-dialog h3{font-size:19px;margin:12px 0}
.herbal-eyebrow{font-size:10px;letter-spacing:3px;color:#aec296}.herbal-hint{font-size:13px;line-height:1.65;color:#c0c6ae;margin:0 0 8px}.herbal-status{min-height:45px;display:grid;place-items:center;font-size:14px;line-height:1.5;color:#eadb9d;margin:12px 0}
.herbal-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0}.herbal-dialog button{min-height:44px;touch-action:manipulation}.herbal-controls button{flex:1}.herbal-dialog .wide{width:100%;margin-top:8px}.herbal-dialog button:focus-visible,.herbal-dialog input:focus-visible{outline:2px solid #f9df9c;outline-offset:4px}
.herbal-plant{position:relative;height:255px;margin:12px auto 0;max-width:300px;background:radial-gradient(ellipse at 50% 70%,#46653c45,transparent 65%)}
.herbal-stem{position:absolute;left:49%;top:25px;width:9px;height:215px;background:linear-gradient(90deg,#345333,#80975a,#304f32);border-radius:6px;transform:rotate(3deg)}
.herbal-stem:after{content:"";position:absolute;bottom:0;left:-50px;width:110px;height:15px;background:#0b140b;border-radius:50%;box-shadow:0 -3px 15px #6e835444}
.herbal-leaf{position:absolute;width:85px;height:57px;border:2px solid #bad19b;border-radius:8% 70% 12% 70%;background:var(--herb-color);box-shadow:inset 0 -10px 0 #203f344d,0 4px 12px #0006;transition:opacity .25s,transform .25s;cursor:pointer;animation:herbal-sway 3.4s ease-in-out infinite}
.herbal-leaf.healthy{filter:drop-shadow(0 0 7px #92b97255)}.herbal-leaf.damaged{background:#625c40;border-color:#898469;clip-path:polygon(0 0,100% 0,100% 35%,73% 48%,100% 62%,100% 100%,0 100%,0 60%,24% 40%,0 32%)}
.leaf-0{left:46px;top:29px;--angle:15deg}.leaf-1{right:36px;top:52px;--angle:-46deg;animation-delay:-1s}.leaf-2{left:41px;top:95px;--angle:4deg;animation-delay:-2s}.leaf-3{right:27px;top:126px;--angle:-34deg}.leaf-4{left:48px;top:164px;--angle:1deg;animation-delay:-1.8s}.leaf-5{right:45px;top:194px;--angle:-31deg;animation-delay:-.8s}
.leaf-vein{position:absolute;left:12%;top:49%;width:78%;height:2px;background:#e6ecc799;transform:rotate(22deg)}.leaf-number{position:relative;display:grid;place-items:center;width:24px;height:24px;margin:auto;border-radius:50%;background:#172519b3;color:#fff4d4;font:14px monospace;text-shadow:0 1px #000}
.herbal-leaf.picked{opacity:.15;animation:none;transform:translateY(-12px) scale(.8)}
.herbal-cauldron{position:relative;height:235px;width:min(300px,100%);margin:auto;--brew-color:#ad85d1;background:radial-gradient(ellipse at 50% 80%,#c8682233,transparent 65%)}
.herbal-pot{position:absolute;left:18%;top:88px;width:64%;height:112px;border-radius:15% 15% 43% 43%;background:linear-gradient(100deg,#161e21,#435254 45%,#1b272b);border:4px solid #67766a;box-shadow:inset 0 -12px 0 #0a1017,0 8px 15px #0008;z-index:2}
.herbal-pot:before,.herbal-pot:after{content:"";position:absolute;top:27px;width:27px;height:30px;border:6px solid #4c5956;border-radius:50%;z-index:-1}.herbal-pot:before{left:-28px}.herbal-pot:after{right:-28px}
.herbal-liquid{position:absolute;left:-2%;top:-10px;width:104%;height:33px;overflow:hidden;border-radius:50%;background:var(--brew-color);border:4px solid #8a9980;box-shadow:inset 0 5px 9px #fff5,0 0 25px color-mix(in srgb,var(--brew-color) 35%,transparent);transition:background .4s}
.herbal-liquid i{position:absolute;left:30%;top:8px;width:10px;height:10px;border:2px solid #ffffcf;border-radius:50%;animation:herbal-bubble 1.6s ease-out infinite}.herbal-liquid i:nth-child(2){left:65%;animation-delay:-.6s}.herbal-liquid i:nth-child(3){left:50%;animation-delay:-1.1s}
.herbal-spoon{position:absolute;left:54%;top:22px;width:10px;height:85px;z-index:3;background:linear-gradient(90deg,#7e5938,#c5a167,#745034);border:1px solid #d0b889;border-radius:8px;transform:rotate(23deg);transform-origin:50% 92%}
.herbal-fire{position:absolute;left:35%;bottom:16px;width:30%;height:45px;border-radius:60% 10% 40% 20%;background:#db943b;box-shadow:0 0 24px #ee7b2377,inset 0 -15px 0 #914322;transform:rotate(-4deg);animation:herbal-flicker .7s ease-in-out infinite alternate}
.herbal-steam i{position:absolute;left:37%;top:52px;width:14px;height:22px;border-radius:50%;background:#d9eac333;animation:herbal-steam 2.8s ease-out infinite}.herbal-steam i:nth-child(2){left:62%;animation-delay:-1s}.herbal-steam i:nth-child(3){left:45%;animation-delay:-1.8s}
.mix-left .herbal-spoon{animation:herbal-stir .35s ease-in-out}.mix-right .herbal-spoon{animation:herbal-stir .35s ease-in-out reverse}.ingredient-drop .herbal-liquid{animation:herbal-splash .36s ease-out}
.herbal-quantity{display:flex;justify-content:center;align-items:center;gap:14px;margin:20px 0}.herbal-quantity input{width:80px;padding:10px;background:#10251c;color:#f4e3af;border:1px solid #718162;font-size:22px;text-align:center;border-radius:5px}.herbal-quantity button{min-width:45px}.herbal-cost{font-size:13px;color:#cbc7ac;line-height:1.8}
.herbal-success{border-color:#b7d98f;box-shadow:0 0 0 4px #15291a,0 0 65px #80b94c33}.herbal-shake{animation:herbal-shake .25s}
@keyframes herbal-sway{0%,100%{transform:rotate(var(--angle))}50%{transform:rotate(calc(var(--angle) + 3deg))}}
@keyframes herbal-bubble{0%{opacity:0;transform:scale(.3)}50%{opacity:.8}100%{opacity:0;transform:scale(1.4)}}
@keyframes herbal-steam{0%{opacity:0;transform:translate(0,0) scale(.5)}30%{opacity:.65}100%{opacity:0;transform:translate(12px,-48px) scale(1.5)}}
@keyframes herbal-flicker{to{transform:rotate(4deg) scaleY(.85);opacity:.8}}
@keyframes herbal-stir{0%,100%{transform:rotate(23deg)}50%{transform:rotate(-30deg) translateX(-20px)}}
@keyframes herbal-splash{50%{transform:scale(1.05);filter:brightness(1.5)}}
@keyframes herbal-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:420px){.herbal-overlay{padding:10px}.herbal-dialog{padding:18px 14px}.herbal-dialog h2{font-size:25px}.herbal-plant{height:254px}.herbal-controls button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.herbal-overlay *{animation:none!important;transition:none!important}}