/* Extra pass: loader, sky cycle, live HUD, dog reactions, meme maker. */

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:#fff5df;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .55s ease,visibility .55s}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
#loader .l-brand{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(40px,9vw,84px);letter-spacing:-2px;line-height:1}
#loader .l-brand span{color:#ff5716}
.lrig{position:relative;height:160px;width:calc(var(--w,0px) + 400px);max-width:96vw;transition:width .25s ease-out}
.lrig img,.lrig .l-torso{position:absolute}
.l-front{left:0;top:0;width:135px;height:150px}
.l-torso{left:132px;top:91px;height:35px;width:var(--w,0px);background:url('assets/web/dog-body.webp') repeat-x;background-size:326px 108.6px;background-position:0 -35px;border-top:2px solid #25190b;border-bottom:2px solid #25190b;transition:width .25s ease-out}
.l-rear{transition:left .25s ease-out;left:calc(101px + var(--w,0px));top:76px;width:222px;height:76px}
.l-tail{transition:left .25s ease-out;left:calc(276px + var(--w,0px));top:59px;width:66px;height:44px;transform-origin:3% 95%;animation:wag .35s ease-in-out infinite}
#loader .l-meta{font-size:12px;font-weight:900;letter-spacing:2px}
#loader .l-meta b{color:#ff5716}

/* ---------- sky cycle (all layers are non-interactive) ---------- */
#skygrad,#stars,#birds{position:absolute;inset:0;pointer-events:none}
#skygrad{z-index:0}
#stars{z-index:0;opacity:0}
#birds{z-index:0}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff8d8;animation:twinkle 2.6s ease-in-out infinite}
.moon{position:absolute;right:12%;top:9%;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe6,#f3e9b8 70%);box-shadow:0 0 50px 14px #fff4c455;opacity:0}
.bird{position:absolute;left:-60px;width:34px;height:14px;animation:bird-fly linear infinite}
.bird svg{width:100%;height:100%;overflow:visible;animation:flap .5s ease-in-out infinite;transform-origin:50% 60%}
.bird path{fill:none;stroke:#4a3b2a;stroke-width:2.2;stroke-linecap:round}
#tint{position:absolute;inset:0;z-index:9;pointer-events:none}
#flies{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0}
.fly{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe86a;box-shadow:0 0 10px 4px #ffe86aaa;animation:firefly 7s ease-in-out infinite}
#rain{position:absolute;inset:0;z-index:10;pointer-events:none;width:100%;height:100%}
body.night .finale{color:#fff5df}
body.night .finale .outline,body.night .finale .gas-button{color:#20180f}
.finale{transition:color .6s}

/* ---------- live price HUD ---------- */
#hud{position:absolute;right:16px;bottom:16px;z-index:12;background:#fff8e8f2;border:2px solid #20180f;border-radius:10px;box-shadow:4px 4px 0 #20180f;padding:10px 14px 9px;width:196px;pointer-events:none;transition:transform .2s,background .25s}
#hud .hud-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#hud b{font-family:Impact,'Arial Narrow',sans-serif;font-size:17px;letter-spacing:.5px}
#hud .hud-price{font-family:Impact,'Arial Narrow',sans-serif;font-size:30px;line-height:1.05;margin-top:2px;letter-spacing:.5px}
#hud .hud-chg{font-size:12px;font-weight:900;letter-spacing:.4px}
#hud.up .hud-chg,#hud.up .hud-price{color:#16864a}
#hud.down .hud-chg,#hud.down .hud-price{color:#d33b2d}
#hud canvas{display:block;width:100%;height:34px;margin-top:5px}
#hud .hud-tag{font-size:8px;letter-spacing:1.2px;font-weight:900;opacity:.55;margin-top:4px}
#hud.flash-up{background:#d4f5d2;transform:scale(1.05)}
#hud.flash-down{background:#fbd5cf;transform:scale(.97)}
.hud-pop{position:absolute;left:50%;top:20%;z-index:14;pointer-events:none;font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(36px,7vw,76px);letter-spacing:-1px;padding:8px 22px;border:3px solid #20180f;border-radius:12px;box-shadow:6px 6px 0 #20180f;white-space:nowrap}
.hud-pop.up{background:#b9ef9b;color:#0f4f27}
.hud-pop.down{background:#ffb5a8;color:#7a1608}
.rocket{position:absolute;left:8%;bottom:6%;z-index:14;pointer-events:none;font-size:56px}
.candle{transform-box:fill-box;transform-origin:50% 100%}

/* ---------- dog reactions ---------- */
.front{pointer-events:auto;cursor:pointer;-webkit-user-drag:none;user-select:none}
.front-wrap.excited{rotate:-5deg;animation:pant .34s ease-in-out infinite}
.front-wrap.sleepy{rotate:3deg;filter:brightness(.97) saturate(.92);transition:rotate 1.2s}
.face-rig.sleeping .eyelid{translate:0 0!important}
.face-rig.sleeping .eye-lashes{opacity:1!important}
.face-rig.sleeping .eye-pupil{opacity:0!important}
.zzz{position:absolute;left:210px;top:290px;z-index:11;pointer-events:none;font-family:Impact,'Arial Narrow',sans-serif;color:#735ce0;opacity:0}
.zzz span{position:absolute;opacity:0;font-size:34px;animation:zzz 2.8s ease-in infinite}
.zzz span:nth-child(2){animation-delay:.9s;font-size:44px}
.zzz span:nth-child(3){animation-delay:1.8s;font-size:56px}
.zzz.on{opacity:1}
.bark{position:absolute;left:260px;top:215px;z-index:12;pointer-events:none;font-family:Impact,'Arial Narrow',sans-serif;font-size:46px;background:#fff8e8;border:3px solid #20180f;border-radius:16px;padding:6px 20px;box-shadow:4px 4px 0 #20180f;opacity:0;white-space:nowrap}
#dog.zoomies{animation:zoomies .16s linear 9}
.trail-bone{position:fixed;left:0;top:0;width:22px;height:15px;z-index:90;pointer-events:none;background:url('assets/svg/bone-mark.svg') center/contain no-repeat;opacity:0}

/* ---------- meme maker ---------- */
#maker-btn{position:absolute;left:16px;bottom:16px;z-index:12;background:#a995e7;border:2px solid #20180f;border-radius:8px;box-shadow:3px 3px 0 #20180f;padding:11px 14px;font-weight:900;font-size:12px;letter-spacing:.5px;transition:transform .2s,box-shadow .2s}
#maker-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #20180f}
#maker{max-width:760px;padding:30px 32px 28px}
#maker h2{font-size:38px;margin:8px 0 6px}
#maker .m-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:14px 0}
#maker label{font-size:11px;font-weight:900;letter-spacing:1.4px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px}
#maker input[type=text]{font:900 16px Arial;padding:11px 12px;border:2px solid #20180f;border-radius:6px;background:#fff8e8;text-transform:uppercase}
#maker input[type=range]{accent-color:#ff5716;width:100%}
#maker canvas{width:100%;height:auto;border:2px solid #20180f;border-radius:8px;background:#fff5df;display:block}
#maker .m-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
#maker .m-actions a{text-decoration:none;display:inline-block;color:inherit}
.m-scroll{overflow-x:auto;border-radius:8px}

@keyframes twinkle{0%,100%{opacity:.25;scale:.7}50%{opacity:1;scale:1.25}}
@keyframes bird-fly{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 140px))}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.55)}}
@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.2}25%{transform:translate(26px,-30px);opacity:1}50%{transform:translate(-18px,-58px);opacity:.35}75%{transform:translate(30px,-24px);opacity:1}}
@keyframes pant{0%,100%{scale:1}50%{scale:1.025 .982}}
@keyframes zzz{0%{opacity:0;translate:0 0}25%{opacity:1}100%{opacity:0;translate:36px -90px}}
@keyframes zoomies{0%,100%{translate:0 0}25%{translate:-34px 3px}75%{translate:34px -3px}}

@media(max-width:700px){
  #hud{right:10px;bottom:10px;width:140px;padding:7px 9px}
  #hud b{font-size:13px}#hud .hud-price{font-size:21px}#hud .hud-chg{font-size:10px}#hud canvas{height:22px}#hud .hud-tag{display:none}
  #maker-btn{left:10px;bottom:10px;font-size:10px;padding:9px 10px}
  #maker{padding:24px 18px}#maker h2{font-size:30px}
}
body.reduced #stars,body.reduced #flies,body.reduced #birds,body.reduced #rain,body.reduced .zzz,body.reduced .trail-bone{display:none}
body.reduced #skygrad,body.reduced #tint{transition:none}
body.reduced .front-wrap.excited,body.reduced #dog.zoomies{animation:none!important}

/* ---------- news ticker + zoomies ---------- */
#news{position:absolute;left:0;right:0;top:0;z-index:11;height:30px;display:flex;align-items:center;gap:12px;padding:0 14px;background:#20180fea;color:#fff5df;font-size:12px;font-weight:900;letter-spacing:.6px;overflow:hidden;pointer-events:none}
#news .news-tag{background:#ff5716;color:#fff;padding:3px 8px;border-radius:3px;font-size:10px;letter-spacing:1.2px;flex:none}
#news .news-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#speedlines{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .3s;background:repeating-linear-gradient(90deg,#20180f40 0 110px,transparent 110px 260px);-webkit-mask-image:repeating-linear-gradient(0deg,#000 0 2px,transparent 2px 34px);mask-image:repeating-linear-gradient(0deg,#000 0 2px,transparent 2px 34px)}
#speedlines.on{opacity:1;animation:streak .22s linear infinite}
.pendant{pointer-events:auto;position:absolute;left:29%;top:61%;width:13%;height:12%;border-radius:50%;background:transparent;z-index:6;transform-origin:50% 8%}
.pendant:focus-visible{outline-color:#ff5716}
@keyframes streak{from{background-position:0 0}to{background-position:-260px 0}}
@media(max-width:700px){#news{right:96px;font-size:10px;padding:0 10px}#news .news-tag{font-size:8px;padding:2px 6px}}
body.reduced #speedlines{display:none}

/* ---------- pigeon revenge ---------- */
#revenge{position:fixed;inset:0;z-index:80;pointer-events:none;perspective:700px;perspective-origin:50% 40%;overflow:hidden}
#revenge .splat{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 10px 6px #0005);transform:rotate(var(--r))}
#revenge .splat svg{width:100%;height:100%;overflow:visible;display:block;position:relative;z-index:1}
#revenge .drip{position:absolute;height:0;background:linear-gradient(90deg,#ece9dc,#fff 40%,#d6d3c0);border:3px solid #20180f;border-top:0;border-radius:0 0 12px 12px;z-index:0}
.rev-flash{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,#d33b2d66);animation:revflash 1.3s ease-out forwards}
.rev-shade{position:absolute;inset:0;background:linear-gradient(#20180f55,transparent 40%)}
.overbird{position:absolute;left:0;top:7vh;width:150px}
.pface{position:absolute;left:50%;bottom:0;margin-left:calc(var(--k,1) * -200px);width:calc(var(--k,1) * 400px);height:calc(var(--k,1) * 480px);pointer-events:none}
.pface.flipped{bottom:auto;top:0;transform:rotate(180deg)}
.pface-img{background:url('assets/web/pigeon.webp') no-repeat;filter:drop-shadow(0 0 28px #d33b2d99) saturate(1.2);animation:rage .09s linear infinite}
.pbubble{position:absolute;left:50%;bottom:calc(100% + 12px);translate:-50% 0;width:max-content;max-width:min(88vw,440px);background:#fff8e8;border:3px solid #20180f;border-radius:18px;box-shadow:5px 5px 0 #20180f;padding:14px 20px;font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(22px,4.4vw,36px);line-height:1.1;text-align:center;letter-spacing:.3px}
.pface.flipped .pbubble{bottom:auto;top:calc(100% + 12px);rotate:180deg}
.pbubble:empty{display:none}
.pbubble::after{content:'';position:absolute;left:50%;bottom:-11px;width:18px;height:18px;margin-left:-9px;background:#fff8e8;border-right:3px solid #20180f;border-bottom:3px solid #20180f;transform:rotate(45deg)}
.pface.flipped .pbubble::after{bottom:auto;top:-11px;transform:rotate(225deg)}
.anger{position:absolute;font-size:calc(var(--k,1) * 52px);animation:anger .5s ease-in-out infinite}
.anger.a1{left:2%;top:4%}.anger.a2{right:4%;top:12%;animation-delay:.2s}
@keyframes revflash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes rage{0%,100%{translate:0 0}25%{translate:-2px 1px}75%{translate:2px -1px}}
@keyframes anger{0%,100%{scale:1}50%{scale:1.3}}
body.reduced #revenge .pface-img,body.reduced .anger,body.reduced .rev-flash{animation:none!important}

#revenge .smear{position:absolute;left:50%;top:50%;translate:0 -50%;transform-origin:0 50%;border-radius:40% 60% 60% 40%/50%;background:linear-gradient(90deg,#fffffff2,#ebe8d6 28%,#c5c8a0cc 58%,#9ca07455 80%,transparent);filter:blur(1.5px);opacity:0;z-index:0;pointer-events:none}

#revenge .dab{position:absolute;translate:-50% -50%;border-radius:50%;background:radial-gradient(ellipse at center,#fffffff0,#e6e3d0 55%,#b9bd9560 80%,transparent);filter:blur(2px);pointer-events:none}