:root{--cream:#fbf3df;--ink:#6b4b2e;--line:#d8c39a;--stitch:rgba(150,112,62,.45);--sage:#e3eecf;--green:#4f7a3c;--orange:#ff8a3d;--honey:#ffb627;--gold:#ffd23f;--teal:#22b3a6;--leaf:#4fae3c;
  --font:"Trebuchet MS","Arial Rounded MT Bold","Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#dfe9cf;overflow:hidden;overscroll-behavior:none;font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none}
#app{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100vw,calc(100dvh * .5625));height:100dvh;overflow:hidden;background:#8cc163;box-shadow:0 0 50px rgba(60,80,40,.35)}
@supports not (height:100dvh){#app{width:min(100vw,calc(100vh * .5625));height:100vh}}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
[hidden]{display:none!important}
button{font-family:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}

.hud-top{position:absolute;top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;display:flex;gap:5px;pointer-events:none}
.pill{background:rgba(251,243,223,.96);border:2px solid var(--line);outline:1.5px dashed var(--stitch);outline-offset:-6px;border-radius:16px;padding:4px 10px;display:flex;flex-direction:column;justify-content:center;min-width:0;box-shadow:0 2px 6px rgba(80,60,30,.18)}
.pill small{font-size:8px;letter-spacing:.14em;opacity:.65;line-height:1.1;font-weight:900}
.pill b{font-size:14px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill b i{font-style:normal;font-size:10px;opacity:.6}
.pill{flex:1}.pill.money{flex:1.25}.pill.money b{color:#4f7a3c}
.pill.lvl em{display:block;height:4px;border-radius:3px;background:rgba(107,75,46,.15);overflow:hidden;margin-top:2px}
.pill.lvl em u{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd23f,#ffb627);transition:width .3s}
.pill.full b{color:#d9561d}
.icon-btn{pointer-events:auto;width:44px;flex:none;border-radius:50%;background:rgba(251,243,223,.96);border:2px solid var(--line)!important;outline:1.5px dashed var(--stitch);outline-offset:-6px;font-size:16px;box-shadow:0 2px 6px rgba(80,60,30,.18)}

.hud-bottom{position:absolute;left:0;right:0;bottom:0;padding:8px 10px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;pointer-events:none}
.bar{display:flex;gap:10px;pointer-events:auto;background:rgba(251,243,223,.96);border:2px solid var(--line);outline:1.5px dashed var(--stitch);outline-offset:-7px;border-radius:22px;padding:10px;box-shadow:0 3px 10px rgba(80,60,30,.2)}
.btn{flex:1;font-size:17px;font-weight:800;padding:11px 10px;border-radius:15px;border:2px solid var(--line)!important;box-shadow:0 3px 0 #c9b083;transition:transform .08s;color:#5b4428}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #c9b083}

#toasts{position:absolute;top:calc(132px + env(safe-area-inset-top));left:10px;right:56px;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:30}
.toast{background:var(--cream);border:2px solid var(--line);outline:1.5px dashed var(--stitch);outline-offset:-5px;border-radius:14px;padding:8px 14px;font-size:14px;font-weight:700;color:#5b4428;box-shadow:0 3px 8px rgba(80,60,30,.2);animation:in .25s ease-out;transition:opacity .4s,transform .4s;max-width:100%}
.toast.bad{background:#ffe0d6}
.toast.out{opacity:0;transform:translateY(-8px)}
@keyframes in{from{opacity:0;transform:translateY(-10px) scale(.96)}}

#sheet{position:absolute;left:8px;right:8px;bottom:calc(150px + env(safe-area-inset-bottom));background:var(--cream);border:2px solid var(--line);outline:1.5px dashed var(--stitch);outline-offset:-7px;border-radius:20px;padding:14px 16px;color:#4a3820;box-shadow:0 4px 14px rgba(80,60,30,.25);z-index:20;animation:up .2s ease-out;max-height:62%;overflow:auto}
@keyframes up{from{transform:translateY(20px);opacity:0}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sheet-head h2{margin:0;font-size:20px}.sheet-head small{font-size:14px;opacity:.7}
.x{background:none;font-size:20px;font-weight:900;padding:4px 8px}
#sheet p,#modal p{margin:8px 0;font-size:14.5px;line-height:1.4}
.muted{opacity:.72}.small{font-size:12px!important}.stats{font-size:12.5px!important;font-weight:700}
.acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.acts button{flex:1 1 45%;background:#fffaf0;color:#5b4428;border:2px solid var(--line);border-radius:13px;padding:10px 8px;font-size:14px;font-weight:800;box-shadow:0 3px 0 #c9b083}
.acts button:active{transform:translateY(2px);box-shadow:0 1px 0 #c9b083}
.acts button:disabled{opacity:.42;box-shadow:none;cursor:default}
.acts button.ghost{background:transparent;flex:0 1 auto;font-size:12px;padding:6px 10px;box-shadow:none;border-width:2px}
.meter{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13.5px;font-weight:700}
.meter span{flex:0 0 52%}
.meter i{flex:1;height:12px;border-radius:7px;background:rgba(107,75,46,.1);border:1.5px solid var(--line);overflow:hidden}
.meter b{display:block;height:100%;background:linear-gradient(90deg,#a9d48a,#6fa64f)}
.meter i.honey b{background:linear-gradient(90deg,#ffd23f,#ffb627)}
.meter i.mite b{background:linear-gradient(90deg,#ffb4a2,#d9561d)}

#modal{position:absolute;inset:0;background:rgba(60,70,40,.35);display:flex;align-items:center;justify-content:center;padding:14px;z-index:40;animation:fadein .25s}
@keyframes fadein{from{opacity:0}}
.report{background:var(--cream);color:#4a3820;border:2px solid var(--line);outline:1.5px dashed var(--stitch);outline-offset:-8px;border-radius:22px;padding:18px 20px;box-shadow:0 6px 18px rgba(60,45,20,.3);width:100%;max-height:92%;overflow:auto}
.report{text-align:center}.report .big{font-size:46px;line-height:1}.report h2{margin:6px 0 10px;font-size:24px}
.report .acts button{background:linear-gradient(#9fcb7c,#78ad55);color:#fff;border-color:#6a9a4b;box-shadow:0 3px 0 #557f3c;font-size:18px}
.btn.up{background:linear-gradient(#9fcb7c,#78ad55);border-color:#6a9a4b!important;box-shadow:0 3px 0 #557f3c;color:#fff;position:relative}
.btn.up span{position:absolute;top:-10px;right:12px;background:#ff6f8e;color:#fff;border:2px solid #fff;border-radius:10px;font-size:12px;padding:0 6px;line-height:1.4;animation:bob 1s ease-in-out infinite alternate}
.goal{pointer-events:auto;display:flex;align-items:center;gap:8px;background:rgba(251,243,223,.97);border:2px solid var(--line);outline:1.5px dashed var(--stitch);outline-offset:-6px;border-radius:18px;padding:8px 10px 8px 12px;box-shadow:0 3px 10px rgba(80,60,30,.2);font-size:13px;font-weight:800;color:#5b4428}
.goal .gt{flex:1;min-width:0}
.goal .gt small{display:block;font-size:9px;letter-spacing:.14em;opacity:.6}
.goal .gbar{height:7px;border-radius:5px;background:rgba(107,75,46,.13);margin-top:4px;overflow:hidden}
.goal .gbar b{display:block;height:100%;background:linear-gradient(90deg,#a9d48a,#6fa64f)}
.goal .rw{font-size:12px;white-space:nowrap;color:#4f7a3c}
.goal button{background:linear-gradient(#f9d77a,#f2b53a);border:2px solid #d9a03a!important;border-radius:12px;padding:8px 12px;font-weight:900;font-size:14px;box-shadow:0 3px 0 #c58a2a;color:#5b4428;animation:pulse .9s ease-in-out infinite alternate}
.goal.done{background:#fff6d6}
@keyframes pulse{to{transform:scale(1.06)}}
.side{position:absolute;right:8px;top:calc(130px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:6px;z-index:5}
.side .icon-btn{height:40px;width:40px;font-size:18px;font-weight:900;color:#5b4428}
#tip{position:absolute;left:10px;right:56px;top:calc(62px + env(safe-area-inset-top));z-index:25;background:#f3f9ea;border:2px solid #b9d39b;outline:1.5px dashed rgba(79,122,60,.35);outline-offset:-6px;border-radius:16px;padding:9px 12px 9px 42px;font-size:13px;line-height:1.35;color:#3f5a2c;box-shadow:0 3px 10px rgba(60,80,40,.2);animation:in .3s ease-out;cursor:pointer}
#tip::before{content:"🐝";position:absolute;left:11px;top:9px;font-size:20px}
#tip b.k{display:block;font-size:9px;letter-spacing:.16em;opacity:.65}
#tip.out{opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s}
.uplist{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.uprow{display:flex;align-items:center;gap:10px;background:#fffaf0;border:2px solid var(--line);border-radius:14px;padding:7px 8px 7px 10px}
.uprow .ic{font-size:24px;width:30px;text-align:center}
.uprow .tx{flex:1;min-width:0;font-size:13.5px;font-weight:800;line-height:1.2}
.uprow .tx small{display:block;font-weight:700;font-size:11.5px;opacity:.7}
.uprow .lv{font-size:11px;opacity:.6;font-weight:900}
.uprow button{flex:none;min-width:84px;background:linear-gradient(#9fcb7c,#78ad55);color:#fff;border:2px solid #6a9a4b;border-radius:12px;padding:8px 8px;font-weight:900;font-size:14px;box-shadow:0 3px 0 #557f3c}
.uprow button:disabled{background:#efe6d2;color:#9a8466;border-color:var(--line);box-shadow:none;cursor:default}
.acts button.buy{background:linear-gradient(#9fcb7c,#78ad55);color:#fff;border-color:#6a9a4b;box-shadow:0 3px 0 #557f3c}
.acts button.gold{background:linear-gradient(#f9d77a,#f2b53a);border-color:#d9a03a;box-shadow:0 3px 0 #c58a2a}
.toast.lvl{background:#fff6d6;font-size:16px}