/* original-style green menus */
:root{--gdark:#0c4a2a;--gmid:#12603a;--glight:#7ad84a;--gtext:#e9ffd8}
#overlay{align-items:stretch;background:rgba(5,25,12,.7)}
#panel{width:min(600px,100%);max-height:none;height:100%;margin:0 auto;border:0;border-radius:0;
 background:radial-gradient(ellipse at 50% 0,#17703f 0,#0c4a2a 60%,#07351d 100%);
 padding:calc(14px + var(--sat)) 12px calc(14px + var(--sab));box-shadow:0 0 0 4px #2f9a3c inset,0 0 0 8px #0a3a20 inset;animation:pin .26s cubic-bezier(.2,.9,.3,1.2);color:var(--gtext)}
@keyframes fadein{from{opacity:0}}
#ptitle{line-height:1.25;height:auto;flex:none;white-space:nowrap;align-self:center;margin:6px 0 12px;padding:6px 36px;min-width:46%;background:#0b2f1c;border:3px solid var(--glight);border-radius:16px;color:#fff;font-size:24px;text-shadow:0 2px 0 rgba(0,0,0,.5);box-shadow:0 3px 0 rgba(0,0,0,.35)}
#ptitle:empty{display:none}
#pclose{top:calc(8px + var(--sat));right:10px;width:50px;height:50px;border:0;border-radius:0;background:url(assets/ui/cancel.png) center/contain no-repeat;font-size:0;padding:0;z-index:2}
#pbody{padding:2px 4px 10px;color:var(--gtext)}
.sub{color:#bfe9a6}.msg{color:var(--gtext)}h4{color:#fff}
.say{color:#fff}
.timer{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.card,.box,.goal,.cur-critter,.day{background:none;color:var(--gtext);border:solid transparent;border-width:20px 28px 16px;border-image:url(assets/ui/cell9.png) 85 160 69 160 fill/20px 28px 16px stretch;border-radius:0}
.card{min-height:96px;padding:0}
.box,.goal,.cur-critter{margin:12px 0}
.day{border-width:16px 20px 12px;border-image-width:16px 20px 12px;min-height:76px;padding:0}
.card.cur,.day.now{filter:hue-rotate(0deg) brightness(1.35) saturate(1.2)}
.card.lock{opacity:.6}
.bar{background:#07351d}.bar i{background:var(--glight)}
.btn{background:none;color:#fff;border:solid transparent;border-width:20px 26px 18px;border-image:url(assets/ui/sm9.png) 74 163 73 163 fill/20px 26px 18px stretch;box-shadow:none;min-height:56px;padding:0 8px;text-shadow:0 2px 0 rgba(0,0,0,.45);margin:4px 3px}
.btn.go{border-image-source:url(assets/ui/sm9g.png)}
.btn.danger,.btn.red{border-image-source:url(assets/ui/sm9r.png);color:#fff}
.btn.big{min-height:66px;font-size:20px}
.btn:active{transform:translateY(2px)}
.tabs button{background:#0b2f1c;border:3px solid #2f9a3c;color:var(--gtext);border-radius:12px}
.tabs button.on{background:linear-gradient(#58c43a,#2f9a3c);color:#fff;border-color:#9bea4a}
.set label{color:var(--gtext)}
.tg{background:#0b2f1c;border-color:#2f9a3c}.tg.on{background:#58c43a}
.cost,.rw,.dn{color:#d9f7c4}.free,.ok{color:#9bea4a}.lk{color:#9bea4a}
.card .nm,.nm{color:#fff}
.sheet{background:#0b2f1c;color:var(--gtext);border:3px solid #2f9a3c;border-radius:14px;padding:8px}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(min-width:480px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card,.box,.goal,.cur-critter{border-width:14px 18px 12px;border-image-width:14px 18px 12px}.card{padding:0 0 4px}

.mcats{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}
.mcat{display:flex;justify-content:space-between;align-items:center;padding:0 18px;min-height:64px;font:400 22px ObelixPro,sans-serif;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5);border:solid transparent;border-width:18px 26px 16px;border-image:url(assets/ui/cell9.png) 85 160 69 160 fill/18px 26px 16px stretch;background:none}
.mcat .mcount{font:700 15px ArialRounded,sans-serif;color:#bfe9a6}
.mcat.r0 .mname{color:#c9f5a8}.mcat.r1 .mname{color:#8fd0ff}.mcat.r2 .mname{color:#d9a8ff}.mcat.r3 .mname{color:#ffd35a}.mcat.r4 .mname{color:#ff8fb8}
.mhead{display:flex;align-items:center;gap:12px;margin-bottom:8px;font:400 22px ObelixPro,sans-serif;color:#fff}
.bk{width:52px;height:52px;background:url(assets/ui/back.png) center/contain no-repeat;border:0}
.mlist{display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;align-items:center;gap:10px;min-height:68px;padding:0 6px;border:solid transparent;border-width:16px 22px 14px;border-image:url(assets/ui/cell9.png) 85 160 69 160 fill/16px 22px 14px stretch;color:#fff}
.mrow:active{transform:scale(.97)}
.mic{width:56px;height:48px;flex:0 0 56px;display:flex;align-items:center;justify-content:center}.mic img{max-width:100%;max-height:100%}
.mtx{flex:1;min-width:0;font-size:15px}.mtx .sub{color:#bfe9a6}
.mpr{font-weight:700;font-size:15px;white-space:nowrap}
.mrow.lock{opacity:.8}.mrow.lock .mtx{color:#9fc79a}
.silh{filter:brightness(0) opacity(.55)}

/* ---- official-style HUD + round side buttons ---- */
.chip{height:34px;min-width:118px;padding:0 12px 0 40px;position:relative;background:linear-gradient(#0e5a2f,#0a3d20);border:3px solid #38c253;border-radius:20px;box-shadow:0 2px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.18);font-size:19px}
.chip img{position:absolute;left:-8px;top:50%;transform:translateY(-50%);height:42px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
#chipVg{margin-left:auto}
#bar{left:auto;right:calc(10px + var(--sar));top:calc(96px + var(--sat));bottom:auto;padding:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:12px;background:none;pointer-events:none}
#bar>*{pointer-events:auto}
#bar .tb,#bar .rbtn{position:relative;flex:none;width:58px;height:58px;border-radius:50%;padding:0;background:radial-gradient(circle at 50% 35%,#fffbe0,#d7f0a8 70%);border:4px solid #1f9a3f;box-shadow:0 0 0 3px #0b4d20,0 3px 4px 3px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-size:0}
#bar .tb img,#bar .rbtn img{height:36px;max-width:40px;object-fit:contain}
#bar .lbl{position:absolute;right:68px;top:50%;transform:translateY(-50%);padding:3px 10px;border-radius:9px;background:#0b2f1c;color:#fff;font:400 14px ObelixPro,ArialRounded,sans-serif;text-shadow:0 1px 0 rgba(0,0,0,.6);white-space:nowrap;pointer-events:none}
.gear{width:34px;height:34px;display:block;background:radial-gradient(circle,transparent 8px,#f0a020 9px 12px,transparent 13px),conic-gradient(#f0a020 0 10%,transparent 10% 15%,#f0a020 15% 25%,transparent 25% 30%,#f0a020 30% 40%,transparent 40% 45%,#f0a020 45% 55%,transparent 55% 60%,#f0a020 60% 70%,transparent 70% 75%,#f0a020 75% 85%,transparent 85% 90%,#f0a020 90% 100%);border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 7px,#000 8px);mask:radial-gradient(circle,transparent 7px,#000 8px)}
#bar .dot{top:-4px;right:-4px}
.grow{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--sab));height:56px;min-width:150px;padding:0 22px;border:solid transparent;border-width:18px 24px 16px;border-image:url(assets/ui/sm9g.png) 74 163 73 163 fill/18px 24px 16px stretch;background:none;box-shadow:none;border-radius:0;flex-direction:row;gap:10px;z-index:3}
.grow:active{transform:translateX(-50%) translateY(2px)}
.grow.pulse{animation:growpulse .8s infinite alternate}@keyframes growpulse{to{transform:translateX(-50%) scale(1.08)}}
.grow .gl{font-size:17px}.grow .gc{font-size:16px}
.fab{right:auto;left:calc(12px + var(--sal));background:radial-gradient(circle at 50% 35%,#fffbe0,#d7f0a8 70%);border:4px solid #1f9a3f;box-shadow:0 0 0 3px #0b4d20;color:#0b4d20}
#btnTop{bottom:calc(76px + var(--sab))}#btnHome{bottom:calc(20px + var(--sab))}
#layer{top:calc(52px + var(--sat))}
body.tut #bar{display:flex}
.grow .gl{white-space:nowrap}.grow{min-width:190px}
#hud{left:calc(20px + var(--sal))}

#visitbar{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + var(--sab));align-items:center;gap:10px;padding:8px 10px 8px 18px;background:rgba(11,47,28,.92);border:3px solid #7ad84a;border-radius:20px;color:#fff;font:400 18px ObelixPro,ArialRounded,sans-serif;z-index:30}
body.visit #visitbar{display:flex}
body.visit #bar,body.visit #btnGrow,body.visit #hud,body.visit #layer,body.visit .fab{display:none!important}
.fcode{font:400 28px ObelixPro,sans-serif;text-align:center;letter-spacing:2px;color:#ffd35a;margin:4px 0}
.frow{display:flex;gap:8px;align-items:center}
.finput{flex:1;min-width:0;height:50px;border-radius:14px;border:3px solid #38c253;background:#0b2f1c;color:#fff;font:700 18px ArialRounded,sans-serif;padding:0 12px;text-transform:uppercase;-webkit-user-select:text;user-select:text}
.mrow .btn{min-height:46px;margin:0 2px;font-size:14px}
body.tut #btnFriends{display:none}
#visitbar{white-space:nowrap}#visitbar .btn{white-space:nowrap;margin:0}

/* collapsible menu (bottom-right button) */
#bar{top:auto;bottom:calc(92px + var(--sab));justify-content:flex-end;gap:10px}
#bar .tb,#bar .rbtn{transition:transform .22s cubic-bezier(.3,1.4,.5,1),opacity .18s}
body:not(.menu-open) #bar{pointer-events:none}
body:not(.menu-open) #bar>*:not(.grow){transform:translateY(40px) scale(.3);opacity:0;pointer-events:none}
#bar>.grow{pointer-events:auto}
body.menu-open #bar>:nth-last-child(1){transition-delay:0s}body.menu-open #bar>:nth-last-child(2){transition-delay:.03s}body.menu-open #bar>:nth-last-child(3){transition-delay:.06s}body.menu-open #bar>:nth-last-child(4){transition-delay:.09s}body.menu-open #bar>:nth-last-child(5){transition-delay:.12s}body.menu-open #bar>:nth-last-child(6){transition-delay:.15s}body.menu-open #bar>:nth-last-child(7){transition-delay:.18s}
#btnMenu{position:fixed;right:calc(10px + var(--sar));bottom:calc(14px + var(--sab));width:66px;height:66px;border-radius:50%;padding:0;background:radial-gradient(circle at 50% 35%,#fffbe0,#d7f0a8 70%);border:4px solid #1f9a3f;box-shadow:0 0 0 3px #0b4d20,0 3px 4px 3px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:4}
#btnMenu img{height:40px;max-width:44px;object-fit:contain}
#btnMenu .mi-close{display:none;height:46px}
body.menu-open #btnMenu .mi-open{display:none}body.menu-open #btnMenu .mi-close{display:block}
#btnMenu:active{transform:scale(.93)}
body.visit #btnMenu{display:none}

/* NEW paw badge (official style) */
.dot{background:url(assets/ui/paw.svg) center/contain no-repeat;border:0;width:36px;height:36px;top:-14px;right:auto;left:-18px;animation:newpop 1.2s ease-in-out infinite;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.dot:after{content:'';position:absolute;left:-2px;right:-2px;bottom:3px;height:16px;background:url(assets/ui/new.png) center/contain no-repeat;filter:drop-shadow(0 1px 0 #000)}
@keyframes newpop{50%{transform:scale(1.12) rotate(-4deg)}}
#btnMenu{background:radial-gradient(circle at 50% 40%,rgba(210,245,185,.92),rgba(150,215,120,.92));border:7px solid #167a32;box-shadow:inset 0 0 0 2px #6ee06a,0 0 0 3px #0a4a1e,0 3px 5px 3px rgba(0,0,0,.3);width:72px;height:72px}
#btnMenu img.mi-open{height:62px;max-width:64px;margin-top:-2px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
#btnMenu .dot{top:-16px;left:-22px}
body.menu-open #btnMenu .dot{display:none!important}

/* extras */
#phelp{position:absolute;top:calc(8px + var(--sat));left:10px;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fffbe0,#d7f0a8 70%);border:3px solid #1f9a3f;color:#0b4d20;font:400 24px ObelixPro,sans-serif;z-index:2;padding:0;box-shadow:0 0 0 2px #0b4d20}
.box.help{background:rgba(255,255,160,.12)}
.slrow{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0 6px 8px!important}
.sl{width:100%;accent-color:#7ad84a;height:28px}
.srow{display:flex;justify-content:space-between;padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.1)}
.mrow.me{filter:brightness(1.3) hue-rotate(20deg)}
#achbar{position:fixed;left:50%;top:calc(80px + var(--sat));transform:translate(-50%,-30px);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.2,.9,.3,1.2);background:rgba(11,47,28,.95);border:3px solid #ffd35a;border-radius:18px;padding:10px 18px;color:#fff;text-align:center;z-index:40;font-size:16px;max-width:88%}
#achbar.on{opacity:1;transform:translate(-50%,0)}#achbar small{color:#bfe9a6}
#installbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--sab));display:flex;align-items:center;gap:8px;background:rgba(11,47,28,.95);border:3px solid #7ad84a;border-radius:18px;padding:8px 10px 8px 14px;color:#fff;font-size:14px;z-index:5;max-width:92%}
#installbar .btn{margin:0;min-height:44px}
body.visit #installbar,body.visit #achbar{display:none}
.frow,.mrow:has(>.btn+.btn){flex-wrap:wrap;gap:6px}
.mrow:has(>.btn+.btn) .mtx{flex:1 0 100%}
.mrow:has(>.btn+.btn) .btn{flex:1;min-width:70px;padding:6px 8px;font-size:15px}
#achbar{top:calc(70px + var(--sat));z-index:60}
.btn[disabled]{filter:grayscale(.4)}
.mrow:has(>.btn+.btn) .btn{border-width:16px 12px 14px;font-size:14px;min-width:0;padding:0}