/* shared site gags: name corrections, eaten cookie banner, belt scroll progress */
.fx-name{white-space:nowrap}
.fx-b{position:relative;display:inline-block}
.fx-b::after{content:"";position:absolute;left:-.08em;right:-.08em;top:50%;height:.18em;background:#e63b2e;border-radius:2px;transform:rotate(-14deg) scaleX(0);transform-origin:0 50%;transition:transform .18s ease-out}
.fx-f{position:absolute;left:-.2em;bottom:.35em;font-family:"Bangers","Luckiest Guy",Impact,sans-serif;font-style:normal;font-weight:400;color:#e63b2e;font-size:2.2em;line-height:1;transform:rotate(-12deg) scale(0);transform-origin:50% 100%;transition:transform .3s cubic-bezier(.34,1.8,.5,1) .15s;text-shadow:1px 1px 0 rgba(0,0,0,.35);pointer-events:none}
.fx-name.is-fixed .fx-b::after{transform:rotate(-14deg) scaleX(1)}
.fx-name.is-fixed .fx-f{transform:rotate(-12deg) scale(1)}
.fx-name{display:inline-block}

.fx-toast{position:fixed;left:50%;bottom:24px;z-index:90;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;background:#f7c21a;color:#111;border:3px solid #000;border-radius:999px;box-shadow:5px 5px 0 #000;transform:translate(-50%,160%) rotate(-2deg);transition:transform .35s cubic-bezier(.34,1.6,.5,1);font-family:"Inter",system-ui,sans-serif}
.fx-toast.is-on{transform:translate(-50%,0) rotate(-2deg)}
.fx-toast img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#5a1220;border:2px solid #000}
.fx-toast b{display:block;font-family:"Luckiest Guy","Bangers",Impact,sans-serif;font-weight:400;font-size:22px;letter-spacing:.02em}
.fx-toast span{font-size:13px;font-weight:600}

.fx-cookie{position:fixed;left:16px;bottom:16px;z-index:80;display:flex;align-items:center;gap:12px;max-width:340px;padding:12px 14px;background:#f6ead2;color:#140608;border:3px solid #000;border-radius:14px;box-shadow:6px 6px 0 #000;font-family:"Inter",system-ui,sans-serif;transform:translateY(calc(100% + 40px)) rotate(-1deg);transition:transform .45s cubic-bezier(.34,1.5,.5,1)}
.fx-cookie.is-on{transform:translateY(0) rotate(-1deg)}
.fx-cookie svg{width:52px;height:52px;flex:none;animation:fx-nibble 2.4s ease-in-out infinite}
.fx-cookie__t{font-weight:800;font-size:15px}
.fx-cookie__s{font-size:14px;color:#5a1220;font-weight:600}
.fx-cookie button{margin-left:auto;flex:none;font:800 14px "Inter",system-ui,sans-serif;padding:9px 14px;border-radius:9px;border:2px solid #000;background:#f7c21a;color:#000;box-shadow:3px 3px 0 #000;cursor:pointer}
.fx-cookie button:focus-visible{outline:3px solid #fff;outline-offset:2px}
@keyframes fx-nibble{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(6deg)}}
.fx-crumb{position:fixed;z-index:81;width:7px;height:7px;border-radius:2px;background:#b07432;pointer-events:none;animation:fx-crumb 1.1s cubic-bezier(.3,.1,.7,1) forwards}
@keyframes fx-crumb{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

.fx-belt{position:fixed;left:0;right:0;top:0;height:12px;z-index:45;pointer-events:none;--p:0}
.fx-belt__strap{position:absolute;inset:0;background:#2a160c;border-top:1px solid #000;border-bottom:1px solid #000;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.fx-belt__strap::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(242,196,90,.45)}
.fx-belt__strap i{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1px #f2c45a}
.fx-belt__fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p)*100%);background:linear-gradient(#5a1220,#3a0b14);border-right:2px solid #f2c45a}
.fx-belt__buckle{position:absolute;top:50%;left:calc(var(--p)*100%);width:28px;height:20px;margin:-10px 0 0 -14px;display:grid;place-items:center;background:linear-gradient(#ffe08a,#e9a90f);border:2px solid #000;border-radius:5px;font-family:"Luckiest Guy","Bangers",Impact,sans-serif;font-size:13px;line-height:1;color:#5a1220;box-shadow:2px 2px 0 #000}
.fx-belt__buckle.pop{animation:fx-pop .35s cubic-bezier(.34,1.8,.5,1)}
@keyframes fx-pop{40%{transform:scale(1.45) rotate(-8deg)}}
.fx-belt__pop{position:absolute;top:12px;margin-left:-14px;font-family:"Bangers",Impact,sans-serif;font-size:15px;color:#f7c21a;text-shadow:1px 1px 0 #000,-1px -1px 0 #000;animation:fx-rise .9s ease-out forwards}
@keyframes fx-rise{from{transform:translateY(0);opacity:1}to{transform:translateY(16px);opacity:0}}
.fx-belt__done{position:absolute;right:10px;top:14px;padding:3px 9px;background:#f7c21a;color:#000;border:2px solid #000;border-radius:6px;font-family:"Bangers",Impact,sans-serif;font-size:15px;letter-spacing:.04em;box-shadow:2px 2px 0 #000;opacity:0;transform:translateY(-6px) rotate(-3deg);transition:.3s}
.fx-belt.is-done .fx-belt__done{opacity:1;transform:translateY(0) rotate(-3deg)}
.fx-belt.is-done .fx-belt__buckle{left:calc(100% - 16px)}

@media (max-width:640px){
  .fx-cookie{left:12px;right:12px;bottom:12px;max-width:none}
  .fx-toast{bottom:16px;max-width:calc(100% - 24px)}
}
@media (prefers-reduced-motion:reduce){
  .fx-cookie,.fx-toast,.fx-b::after,.fx-f,.fx-belt__done{transition:none}
  .fx-cookie svg,.fx-belt__buckle.pop,.fx-belt__pop,.fx-crumb{animation:none}
}