/* Little Leash: daily game layer (game.js). Uses the theme variables from pup.css. */
.gstar{margin-left:6px}
.gfire.on{animation:gflame 1.6s ease-in-out infinite}
@keyframes gflame{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.ghero{display:flex;gap:14px;align-items:center}
.ghero .masc{margin:0;flex:none}
.ghero>div{flex:1;min-width:0}
.grank{margin-top:10px;display:grid;gap:4px}
.grank>span:first-child{font-weight:700}
.gbar{display:block;height:18px;border-radius:999px;background:#FFFDF9;overflow:hidden;border:2px solid #F1D9C7;padding:2px;box-shadow:inset 0 2px 3px rgba(150,90,60,.10)}
.gbar i{position:relative;display:block;height:100%;min-width:14px;border-radius:999px;background:repeating-linear-gradient(-45deg,#FF9A72 0 8px,#FFC2A4 8px 16px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55);transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.grank small{color:var(--mut);font-size:12px}
.gq{display:grid;gap:10px;margin-top:10px}
.gqi{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:var(--card);border:2px solid var(--line);transition:transform .15s}
.gqi:active{transform:scale(.97)}
.gqi b{display:block;line-height:1.3}
.gqi small{color:var(--mut);font-size:12px}
.gqi>span:nth-child(2){flex:1}
.gqc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card2);font-size:20px;flex:none}
.gqi.ok{border-color:var(--green)}
.gqi.ok .gqc{background:var(--green);color:#10331f}
.gchest{margin-top:14px;width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:22px;border:2px dashed var(--line);background:var(--card);font-weight:600}
.gch{display:grid;place-items:center;width:56px;height:50px;flex:none}
.gchest.ready{border-color:var(--gold);background:linear-gradient(135deg,rgba(255,181,71,.25),rgba(255,122,89,.18))}
.gchest.ready:disabled{opacity:1}
.gchest.open{border-style:solid;border-color:var(--green)}
@keyframes gwiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-1deg)}}
.gworld{margin-top:22px}
.gwh{display:flex;align-items:center;gap:12px}
.gwh b{display:block}
.gwh small{color:var(--mut);font-size:12px;display:block;line-height:1.3}
.gwh em{margin-left:auto;font-style:normal;color:var(--mut);font-size:13px}
.gwb{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--card2);filter:grayscale(1);opacity:.6;flex:none}
.gwb.on{filter:none;opacity:1}
.gpath{position:relative;display:grid;gap:14px;padding:16px 0 4px}
.gnode{position:relative;display:flex;align-items:center;gap:12px;margin-left:var(--x,0)}
.gdot{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;flex:none;background:var(--card2);border:3px solid var(--line);box-shadow:0 5px 0 rgba(0,0,0,.18)}
.gnode.d .gdot{background:var(--gold);border-color:var(--gold);color:#3b2400}
.gnode.cur .gdot{background:linear-gradient(#FFC6AA,#FFA883);border-color:#FFA883;color:#4A2C22;animation:gpulse 1.8s ease-in-out infinite}
.gnode.lk{opacity:.55}
.gnode:active .gdot{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
@keyframes gpulse{0%,100%{box-shadow:0 5px 0 rgba(0,0,0,.18),0 0 0 0 rgba(255,122,89,.5)}50%{box-shadow:0 5px 0 rgba(0,0,0,.18),0 0 0 12px rgba(255,122,89,0)}}
.glab{font-size:14px;font-weight:600;line-height:1.3;flex:1;min-width:0;max-width:220px}
.glab small{display:block;color:var(--mut);font-weight:500;font-size:12px}
.gmasc{position:absolute;left:-6px;top:-44px;pointer-events:none}
.gnode.cur{margin-top:44px}
.gmasc .masc{margin:0}
.gxp{position:fixed;left:50%;top:38%;transform:translateX(-50%);z-index:90;font-weight:800;font-size:28px;color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.2);pointer-events:none;animation:gxp 1.1s ease-out forwards}
@keyframes gxp{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
@media (prefers-reduced-motion:reduce){.gfire.on,.gchest.ready,.gnode.cur .gdot,.gxp{animation:none}.gbar i{transition:none}}

.gchest:disabled{opacity:.7}
.pvbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:200;display:flex;gap:6px;align-items:center;background:#4A2C22;color:#FFF4E8;border-radius:999px;padding:6px 8px 6px 14px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.pvbar button{background:#FFF4E8;color:#4A2C22;border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px}

/* ================= little treats (09/11) ================= */
:root{
  --m-paw:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><ellipse cx='18' cy='24' rx='6' ry='8'/><ellipse cx='32' cy='17' rx='6' ry='8'/><ellipse cx='46' cy='24' rx='6' ry='8'/><path d='M32 30c-9 0-17 9-17 17 0 5 4 8 9 7 3-.5 5-2 8-2s5 1.5 8 2c5 1 9-2 9-7 0-8-8-17-17-17z'/></svg>");
  --m-bone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='18 0 264 150'><path d='M100 40H200A40 40 0 1 1 266.5 75A40 40 0 1 1 200 110H100A40 40 0 1 1 33.5 75A40 40 0 1 1 100 40Z'/></svg>");
  --m-heart:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 16'><path d='M0 5C-7 0-9-6-5-8.6-2.6-10 0-8 0-5.6 0-8 2.6-10 5-8.6 9-6 7 0 0 5Z'/></svg>");
  --i-bone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='18 0 264 150'><path d='M100 40H200A40 40 0 1 1 266.5 75A40 40 0 1 1 200 110H100A40 40 0 1 1 33.5 75A40 40 0 1 1 100 40Z' fill='%23F3B56C' stroke='%23B9733A' stroke-width='10'/><path d='M108 58H192' stroke='%23FFF3DF' stroke-width='12' stroke-linecap='round'/></svg>");
}
/* re-render after a tap: no whole-screen hop */
.view.calm,.view.calm .stg,.view.calm .masc{animation:none}

/* practice: the treat counter */
.gtr{position:relative}
.gbis{position:relative;z-index:1;display:flex;justify-content:center;margin:-6px auto -18px;pointer-events:none}
.gbis .masc{margin:0}
.view .gbis.chomp .masc{animation:gchomp .45s var(--boing) .4s}
@keyframes gchomp{0%{transform:scale(1.1,.86)}45%{transform:translateY(-8px) scale(.96,1.06)}100%{transform:none}}
.grep.gbone{position:relative;display:block;width:300px;max-width:100%;margin:0 auto;padding:0;border:0;border-radius:44px;background:none;box-shadow:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--ease)}
.gbone .gbsvg{display:block;width:100%;height:auto}
.gbone:active{transform:translateY(5px) scale(.97)}
.gbone.pop{animation:gbpop .42s var(--boing)}
@keyframes gbpop{0%{transform:translateY(4px) scale(.94,.9)}60%{transform:scale(1.03,1.04)}100%{transform:none}}
.gbone:disabled{opacity:1;cursor:default}
.gbone:disabled:active{transform:none}
.gbone .grn{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);white-space:nowrap;font-size:24px;font-weight:700;color:#6B4638;line-height:1}
.gbone .grn b{font-size:54px;font-weight:800;color:var(--choc);letter-spacing:-.02em}
.ghint{display:block;margin-top:4px;color:var(--mut);font-weight:700;font-size:14px}
.gtray{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:12px auto 0;padding:8px 14px;border-radius:999px;background:var(--felt);border:2px dashed rgba(122,74,52,.2)}
.gt{display:grid;place-items:center;width:26px;height:22px}
.gt:not(.got){opacity:.45}
.gt:not(.got) .gtb{fill:#FFFDF9;stroke-dasharray:26 16}
.gt:not(.got) .gth{opacity:0}
.gt.now{animation:gtnow .5s var(--boing) .25s both}
@keyframes gtnow{0%{transform:scale(.2) rotate(-30deg)}100%{transform:none}}
.gbone.full~.ghint{color:var(--green)}
.gbone.full~.gtray{border-color:var(--mint2);border-style:solid;background:#F1FBF6}
.gfly,.gtoss,.gheart,.gcrumb{position:fixed;z-index:97;pointer-events:none}
.gfly{margin:-9px 0 0 -15px;animation:gfly .5s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes gfly{0%{transform:scale(1.2)}50%{transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .5 - 60px)) scale(1.35) rotate(170deg)}100%{transform:translate(var(--dx),var(--dy)) scale(.45) rotate(340deg);opacity:.15}}
.gcrumb{width:6px;height:5px;margin:-3px 0 0 -3px;border-radius:40%;animation:gcrumb .55s ease-out forwards}
@keyframes gcrumb{0%{transform:none}60%{opacity:1;transform:translate(var(--dx),var(--dy))}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 24px))}}
.gtoss{margin:-8px 0 0 -13px;opacity:0;animation:gtoss .95s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes gtoss{0%{opacity:1;transform:scale(.4)}45%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(120deg)}100%{opacity:0;transform:translate(calc(var(--dx) * 1.1),calc(var(--dy) + 90px)) scale(.9) rotate(250deg)}}
.gheart{opacity:0;animation:gheart 1s ease-out forwards}
@keyframes gheart{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:translateY(-8px) scale(1.15)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}

/* home: pet Biscuit */
.gpet{flex:none;padding:0;border:0;background:none;border-radius:40%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.gpet .masc{margin:0}
.view .gpet.boop .masc{animation:gboop .5s var(--boing)}
@keyframes gboop{0%{transform:scale(.88,1.1)}50%{transform:scale(1.08,.94)}100%{transform:none}}

/* home: plush chest */
.gcsvg{transform-origin:50% 90%}
@keyframes gchw{0%,55%,100%{transform:none}63%{transform:translateY(-4px) rotate(-8deg)}71%{transform:translateY(-2px) rotate(7deg)}79%{transform:rotate(-4deg)}87%{transform:rotate(2deg)}}
.gchest.ready .gch{position:relative}
.gchest.ready:not(.open) .gch::after{content:"";position:absolute;right:-2px;top:0;width:12px;height:12px;background:#FFCB5C;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:gtw 1.4s ease-in-out infinite}
@keyframes gtw{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.1);opacity:1}}
.gcl{transition:transform .3s}
.gcsvg{overflow:visible}
.gchest.ready:not(.open) .gcsvg{animation:gchw 1.8s ease-in-out infinite}
.gchest.open .gcl{transform:translate(-5px,-13px) rotate(-16deg)}
.gchest.just .gcl{animation:glid .6s var(--boing) both}
@keyframes glid{0%{transform:none}100%{transform:translate(-5px,-13px) rotate(-16deg)}}
.gchest.just .gcin{animation:gcin .5s var(--boing) .2s both}
@keyframes gcin{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.gchest.just .gcsvg{animation:gchpop .5s var(--boing)}
@keyframes gchpop{0%{transform:scale(.9,1.1)}50%{transform:scale(1.12,.92)}100%{transform:none}}

/* progress bars: a little paw walks at the tip */
.gbar i::after,.lsh .qzbar i::after{content:"";position:absolute;right:2px;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;-webkit-mask:var(--m-paw) center/contain no-repeat;mask:var(--m-paw) center/contain no-repeat}
.lsh .qzbar{height:20px}
.lsh .qzbar i{height:100%;min-width:16px}
.lsh .qzbar i::after{width:11px;height:11px;margin-top:-5.5px;animation:gpaw .8s ease-in-out infinite alternate}
@keyframes gpaw{from{transform:rotate(-12deg)}to{transform:translateY(-1px) rotate(12deg)}}

/* XP pop with a treat */
.gxp::before{content:"";display:inline-block;width:32px;height:18px;margin-right:6px;vertical-align:0;background:var(--i-bone) center/contain no-repeat}

/* confetti: bones and hearts join the stars */
.cf:nth-child(3n+2){border-radius:0;-webkit-mask:var(--m-bone) center/contain no-repeat;mask:var(--m-bone) center/contain no-repeat}
.cf:nth-child(3n){border-radius:0;-webkit-mask:var(--m-heart) center/contain no-repeat;mask:var(--m-heart) center/contain no-repeat}

@media (prefers-reduced-motion:reduce){
  .gbone.pop,.gt.now,.gchest.ready:not(.open) .gcsvg,.gchest.ready:not(.open) .gch::after,.gchest.just .gcl,.gchest.just .gcin,.gchest.just .gcsvg,.lsh .qzbar i::after,.gfly,.gtoss,.gheart,.gcrumb{animation:none!important}
  .gfly,.gtoss,.gheart,.gcrumb{display:none}
  .gbone,.gcl{transition:none}.gbone:active{transform:none}
}

/* Biscuit's tip of the day: speech bubble */
.gtip{display:flex;align-items:flex-end;gap:6px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.gtipm{flex:none;width:64px;margin-bottom:-4px}
.gtipb{position:relative;flex:1;background:#FFFDF9;border:2px solid #F1D9C7;border-radius:22px 22px 22px 6px;padding:12px 14px;box-shadow:0 4px 0 #EED3BF}
.gtipb::before{content:"";position:absolute;left:-9px;bottom:10px;width:14px;height:14px;background:#FFFDF9;border-left:2px solid #F1D9C7;border-bottom:2px solid #F1D9C7;transform:rotate(45deg) skew(8deg,8deg)}
.gtipb small{display:block;font-weight:700;color:#B07050;font-size:12px;letter-spacing:.02em}
.gtipb p{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--choc,#4A2C22)}