#hnlp-root{position:relative;z-index:2147480000}
.hnlp-wrap{--hnlp-w:300px;--hnlp-speed:1;position:fixed;z-index:2147480000;display:flex;align-items:flex-end;pointer-events:none;opacity:0;transform:translateY(28px) scale(.94);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.hnlp-wrap.hnlp-enter{animation:hnlp-in calc(.45s / var(--hnlp-speed)) cubic-bezier(.2,.85,.25,1) forwards}
.hnlp-wrap.hnlp-leave{animation:hnlp-out calc(.32s / var(--hnlp-speed)) ease forwards}
.hnlp-character{position:relative;width:83px;height:112px;margin-right:-13px;z-index:3;filter:drop-shadow(0 5px 5px #0003)}
.hnlp-hat{position:absolute;left:17px;top:9px;font-size:40px;line-height:1;z-index:3}
.hnlp-face{position:absolute;left:23px;top:43px;width:46px;height:43px;border-radius:48% 48% 52% 52%;background:#ffd7b5;border:2px solid #35251d;z-index:2}
.hnlp-eye{position:absolute;top:14px;width:6px;height:7px;background:#1d2430;border-radius:50%}.hnlp-eye.left{left:11px}.hnlp-eye.right{right:10px}
.hnlp-nose{position:absolute;left:21px;top:19px;width:5px;height:8px;border-left:2px solid #9d6549;transform:rotate(12deg)}
.hnlp-mouth{position:absolute;left:15px;top:30px;width:17px;height:7px;border-bottom:2px solid #6a2e27;border-radius:50%}
.hnlp-body{position:absolute;left:30px;top:82px;font-size:37px;line-height:1;color:#155fb0;transform:scaleX(1.35)}
.hnlp-arm{position:absolute;width:30px;height:7px;background:#ffd7b5;border:2px solid #35251d;border-radius:8px;left:51px;top:72px;transform:rotate(-25deg);transform-origin:left center;z-index:4}
.hnlp-gavel{position:absolute;left:57px;top:43px;font-size:35px;transform-origin:15% 80%;z-index:5;animation:hnlp-gavel calc(1.05s / var(--hnlp-speed)) ease-in-out .12s 1 both}
.hnlp-spark{position:absolute;right:-2px;bottom:16px;font-size:25px;color:#ffb000;opacity:0;z-index:6;animation:hnlp-spark calc(.5s / var(--hnlp-speed)) ease calc(.75s / var(--hnlp-speed)) 1 both}
.hnlp-do-wink .hnlp-eye.left{animation:hnlp-wink calc(.6s / var(--hnlp-speed)) ease calc(.86s / var(--hnlp-speed)) 1}
.hnlp-speech{position:absolute;right:7px;top:-18px;transform:translateX(35%);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff;border:2px solid #145fae;color:#d62323;font-size:10px;font-weight:900;padding:5px 8px;border-radius:13px;box-shadow:0 5px 13px #0002}
.hnlp-speech:after{content:"";position:absolute;bottom:-7px;left:28%;border:6px solid transparent;border-top-color:#145fae;border-bottom:0}
.hnlp-card{position:relative;pointer-events:auto;width:var(--hnlp-w);min-height:90px;background:#fff;border:2px solid #f0a000;border-radius:13px;box-shadow:0 10px 28px #0a27474a;padding:7px;display:grid;grid-template-columns:78px 1fr;gap:8px;overflow:visible}
.hnlp-close{position:absolute;right:-9px;top:-11px;z-index:8;width:25px;height:25px;border-radius:50%;border:2px solid #fff;background:#083e7c;color:#fff;font:700 18px/18px Arial;cursor:pointer;box-shadow:0 2px 8px #0003}
.hnlp-image{width:78px;height:76px;object-fit:cover;border-radius:8px;background:#edf3f8;border:1px solid #dfe7ef}.hnlp-noimg{display:grid;place-items:center;font-size:25px;color:#8ba1b6}
.hnlp-info{min-width:0;padding-right:3px}.hnlp-hot{font-size:9px;font-weight:950;color:#e12b24;letter-spacing:.02em;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hnlp-title{display:block;color:#14233a;font-size:12px;line-height:1.15;max-height:29px;overflow:hidden}.hnlp-price{display:block;color:#d71920;font-size:16px;line-height:1.1;margin-top:3px}.hnlp-location{display:block;color:#55677a;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hnlp-link{display:inline-block;margin-top:5px;padding:4px 8px;border-radius:6px;background:#0874d9;color:#fff!important;text-decoration:none!important;font-size:9px;font-weight:850}
@keyframes hnlp-in{to{opacity:1;transform:none}}@keyframes hnlp-out{to{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes hnlp-gavel{0%{transform:rotate(-42deg) translateY(-5px)}45%{transform:rotate(-48deg) translateY(-10px)}72%{transform:rotate(44deg) translate(4px,14px)}86%{transform:rotate(18deg) translate(0,3px)}100%{transform:rotate(23deg)}}
@keyframes hnlp-spark{0%{opacity:0;transform:scale(.1) rotate(0)}45%{opacity:1;transform:scale(1.6) rotate(35deg)}100%{opacity:0;transform:scale(.5) rotate(70deg)}}
@keyframes hnlp-wink{0%,35%,100%{height:7px;border-radius:50%;background:#1d2430;transform:none}45%,70%{height:2px;border-radius:5px;background:#1d2430;transform:translateY(3px) rotate(-8deg)}}
@media(max-width:700px){
 .hnlp-character{width:55px;height:78px;margin-right:-10px}.hnlp-hat{font-size:27px;left:10px;top:9px}.hnlp-face{left:15px;top:31px;width:32px;height:30px}.hnlp-eye{top:9px;width:4px;height:5px}.hnlp-eye.left{left:7px}.hnlp-eye.right{right:7px}.hnlp-nose{left:15px;top:13px;height:6px}.hnlp-mouth{left:10px;top:21px;width:12px;height:5px}.hnlp-body{left:20px;top:57px;font-size:24px}.hnlp-arm{width:22px;height:5px;left:35px;top:51px}.hnlp-gavel{left:38px;top:28px;font-size:24px}.hnlp-spark{font-size:17px;right:-2px;bottom:8px}.hnlp-speech{font-size:7px;max-width:105px;top:-9px;padding:3px 5px}
 .hnlp-card{grid-template-columns:50px 1fr;gap:5px;min-height:64px;padding:5px;border-radius:10px}.hnlp-image{width:50px;height:52px;border-radius:6px}.hnlp-hot{font-size:7px}.hnlp-title{font-size:9px;max-height:22px}.hnlp-price{font-size:12px}.hnlp-location{font-size:7px}.hnlp-link{font-size:7px;padding:3px 5px;margin-top:3px}.hnlp-close{width:21px;height:21px;font-size:15px;right:-7px;top:-9px}
}
/* Admin Live Preview uses the exact production component, constrained to the preview stage. */
.lp-preview-stage #hnlp-preview-root{position:absolute;inset:0;overflow:visible}
.lp-preview-stage .hnlp-preview-wrap{position:absolute!important;right:18px!important;bottom:18px!important;z-index:20!important;max-width:calc(100% - 20px)}
.lp-preview-stage .hnlp-preview-wrap .hnlp-speech{max-width:125px}

/* v1.1.2 Huutonikkari-style mascot + viewport-safe sizing */
.hnlp-wrap{max-width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
.hnlp-character{width:92px;height:126px;margin-right:-16px;overflow:visible}
.hnlp-mascot{display:block;position:absolute;left:0;bottom:0;width:92px;height:auto;max-height:126px;object-fit:contain;transform-origin:70% 78%;animation:hnlp-mascot-hit calc(1.05s / var(--hnlp-speed)) ease-in-out .08s 1 both}
.hnlp-wink-overlay{position:absolute;left:31px;top:45px;width:12px;height:8px;border-bottom:3px solid #1f2b38;border-radius:0 0 10px 10px;opacity:0;transform:rotate(-8deg);z-index:8}
.hnlp-do-wink .hnlp-wink-overlay{animation:hnlp-logo-wink calc(.55s / var(--hnlp-speed)) ease calc(.86s / var(--hnlp-speed)) 1}
.hnlp-character .hnlp-hat,.hnlp-character .hnlp-face,.hnlp-character .hnlp-body,.hnlp-character .hnlp-arm,.hnlp-character .hnlp-gavel{display:none!important}
.hnlp-spark{right:-2px;bottom:16px}
.hnlp-speech{right:0;top:-12px;transform:translateX(22%);max-width:140px}
@keyframes hnlp-mascot-hit{
  0%{transform:translateY(5px) rotate(-1deg)}
  44%{transform:translateY(0) rotate(-2deg)}
  68%{transform:translateY(3px) rotate(3deg)}
  82%{transform:translateY(0) rotate(0)}
  100%{transform:none}
}
@keyframes hnlp-logo-wink{
  0%,30%,100%{opacity:0}
  42%,72%{opacity:1}
}
@media(max-width:700px){
 .hnlp-character{width:58px;height:82px;margin-right:-10px}
 .hnlp-mascot{width:58px;max-height:82px}
 .hnlp-wink-overlay{left:20px;top:29px;width:8px;height:5px;border-bottom-width:2px}
 .hnlp-speech{top:-6px;right:1px;transform:translateX(28%);max-width:92px}
}
/* Admin preview: always contain full mascot + bubble + card */
.lp-preview-stage{min-height:390px!important;padding:18px!important;overflow:hidden!important}
.lp-preview-stage #hnlp-preview-root{position:absolute;inset:14px!important;display:flex;align-items:flex-end;justify-content:flex-end;overflow:visible!important}
.lp-preview-stage .hnlp-preview-wrap{
 position:relative!important;right:auto!important;bottom:auto!important;
 transform-origin:right bottom!important;
 max-width:100%!important;max-height:100%!important;
}
@media(max-width:1200px){
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(.88)!important}
}
@media(max-width:980px){
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(.76)!important}
}
@media(max-width:700px){
 .lp-preview-stage{min-height:300px!important}
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(.68)!important}
}

/* v1.1.3 — ADMIN PREVIEW ONLY.
   Frontend sizes remain unchanged. */
.lp-preview-stage{
  min-height:420px!important;
  padding:20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.lp-preview-stage #hnlp-preview-root{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:380px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.lp-preview-stage .hnlp-preview-wrap{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:scale(1.28)!important;
  transform-origin:center center!important;
  max-width:none!important;
  max-height:none!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-card{
  width:310px!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-character{
  width:102px!important;
  height:142px!important;
  margin-right:-15px!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-mascot{
  width:102px!important;
  max-height:142px!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-speech{
  max-width:155px!important;
  font-size:11px!important;
  top:-14px!important;
}
@media(max-width:1200px){
  .lp-preview-stage .hnlp-preview-wrap{transform:scale(1.15)!important}
}
@media(max-width:980px){
  .lp-preview-stage{min-height:380px!important}
  .lp-preview-stage #hnlp-preview-root{min-height:340px!important}
  .lp-preview-stage .hnlp-preview-wrap{transform:scale(1.02)!important}
}
@media(max-width:700px){
  .lp-preview-stage{min-height:320px!important;padding:12px!important}
  .lp-preview-stage #hnlp-preview-root{min-height:290px!important}
  .lp-preview-stage .hnlp-preview-wrap{transform:scale(.90)!important}
}

/* ============================================================
   v1.2.0 — Huutonikkari mascot animation
   Body + golden gavel are separate moving layers.
   ============================================================ */
.hnlp-character{
  width:104px!important;
  height:137px!important;
  margin-right:-17px!important;
  overflow:visible!important;
  filter:drop-shadow(0 6px 6px #001e4935)!important;
}
.hnlp-mascot-motion{
  position:absolute;
  left:0; bottom:0;
  width:98px; height:128px;
  transform-origin:58% 82%;
  animation:hnlp-character-bounce calc(1.22s / var(--hnlp-speed)) cubic-bezier(.3,.8,.3,1) .02s 1 both;
}
.hnlp-mascot{
  position:absolute!important;
  display:block!important;
  left:0!important; bottom:0!important;
  width:98px!important; height:128px!important;
  max-height:none!important;
  object-fit:contain!important;
  animation:none!important;
}
.hnlp-gavel-arm{
  position:absolute;
  z-index:12;
  left:62px;
  top:20px;
  width:50px;
  height:88px;
  transform-origin:13px 76px;
  animation:hnlp-real-gavel calc(1.22s / var(--hnlp-speed)) cubic-bezier(.2,.76,.25,1) .03s 1 both;
}
.hnlp-gavel-img{
  display:block;
  width:50px;
  height:76px;
  object-fit:contain;
  transform:rotate(-2deg);
}
.hnlp-wink-overlay{
  position:absolute!important;
  z-index:15!important;
  left:35px!important;
  top:49px!important;
  width:12px!important;
  height:8px!important;
  border:0!important;
  opacity:0;
  background:#f2b285;
}
.hnlp-wink-overlay:after{
  content:"";
  position:absolute;left:0;top:2px;
  width:12px;height:4px;
  border-bottom:3px solid #47281b;
  border-radius:0 0 14px 14px;
  transform:rotate(-7deg);
}
.hnlp-do-wink .hnlp-wink-overlay{
  animation:hnlp-real-wink calc(.52s / var(--hnlp-speed)) ease calc(.87s / var(--hnlp-speed)) 1 both!important;
}
.hnlp-spark{
  z-index:14!important;
  right:-9px!important;
  bottom:14px!important;
  color:#ffb400!important;
  text-shadow:0 0 6px #ffd900;
  animation:hnlp-real-spark calc(.55s / var(--hnlp-speed)) ease calc(.73s / var(--hnlp-speed)) 1 both!important;
}
.hnlp-strike-ring{
  position:absolute;
  z-index:11;
  right:-10px;
  bottom:15px;
  width:22px;height:10px;
  border:3px solid #ffbc00;
  border-radius:50%;
  opacity:0;
  animation:hnlp-strike-ring calc(.52s / var(--hnlp-speed)) ease calc(.73s / var(--hnlp-speed)) 1 both;
}
.hnlp-speech{
  z-index:20!important;
  right:7px!important;
  top:-15px!important;
  transform:translateX(24%)!important;
  max-width:145px!important;
  border-color:#0967c8!important;
  box-shadow:0 5px 14px #00397729!important;
}
@keyframes hnlp-real-gavel{
  0%{transform:rotate(-48deg) translate(-2px,-7px)}
  34%{transform:rotate(-61deg) translate(-5px,-10px)}
  55%{transform:rotate(-67deg) translate(-6px,-11px)}
  72%{transform:rotate(31deg) translate(4px,7px)}
  79%{transform:rotate(38deg) translate(7px,12px)}
  90%{transform:rotate(15deg) translate(1px,2px)}
  100%{transform:rotate(20deg)}
}
@keyframes hnlp-character-bounce{
  0%{transform:translateY(7px) rotate(-1deg)}
  35%{transform:translateY(0) rotate(-2deg)}
  61%{transform:translateY(-1px) rotate(-1deg)}
  76%{transform:translateY(4px) rotate(3deg)}
  88%{transform:translateY(0) rotate(-1deg)}
  100%{transform:none}
}
@keyframes hnlp-real-wink{
  0%,26%,100%{opacity:0}
  39%,72%{opacity:1}
}
@keyframes hnlp-real-spark{
  0%{opacity:0;transform:scale(.05) rotate(0)}
  38%{opacity:1;transform:scale(1.8) rotate(20deg)}
  100%{opacity:0;transform:scale(.4) rotate(75deg)}
}
@keyframes hnlp-strike-ring{
  0%{opacity:0;transform:scale(.2)}
  34%{opacity:.95;transform:scale(.9)}
  100%{opacity:0;transform:scale(2.5)}
}

/* Mobile front-end stays intentionally small. */
@media(max-width:700px){
 .hnlp-character{width:63px!important;height:86px!important;margin-right:-10px!important}
 .hnlp-mascot-motion{width:61px;height:82px}
 .hnlp-mascot{width:61px!important;height:82px!important}
 .hnlp-gavel-arm{left:38px;top:12px;width:32px;height:56px;transform-origin:8px 48px}
 .hnlp-gavel-img{width:32px;height:49px}
 .hnlp-wink-overlay{left:22px!important;top:31px!important;width:8px!important;height:6px!important}
 .hnlp-wink-overlay:after{width:8px;height:3px;border-bottom-width:2px}
 .hnlp-speech{top:-7px!important;right:1px!important;max-width:94px!important;font-size:7px!important}
 .hnlp-spark{font-size:17px!important;right:-5px!important;bottom:8px!important}
 .hnlp-strike-ring{right:-5px;bottom:9px;width:13px;height:6px;border-width:2px}
}

/* Admin Preview: same animation, larger and centered only inside test box. */
.lp-preview-stage #hnlp-preview-root{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.lp-preview-stage .hnlp-preview-wrap{
  position:relative!important;
  right:auto!important;bottom:auto!important;
  transform:scale(1.30)!important;
  transform-origin:center center!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-character{
  width:112px!important;height:150px!important;margin-right:-14px!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-mascot-motion{
  width:108px!important;height:145px!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-mascot{
  width:108px!important;height:145px!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-gavel-arm{
  left:68px!important;top:20px!important;width:56px!important;height:95px!important;
  transform-origin:15px 82px!important;
}
.lp-preview-stage .hnlp-preview-wrap .hnlp-gavel-img{width:56px!important;height:84px!important}
.lp-preview-stage .hnlp-preview-wrap .hnlp-wink-overlay{left:39px!important;top:56px!important}
.lp-preview-stage .hnlp-preview-wrap .hnlp-card{width:310px!important}
.lp-preview-stage .hnlp-preview-wrap .hnlp-speech{
  max-width:155px!important;font-size:11px!important;top:-18px!important
}
@media(max-width:1200px){
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(1.15)!important}
}
@media(max-width:980px){
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(1.0)!important}
}
@media(max-width:700px){
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(.84)!important}
}

/* v1.2.1 — ADMIN PREVIEW AUTO-FIT ONLY.
   Public site / listing animation dimensions are unchanged. */
.lp-preview-stage{
  overflow:hidden!important;
  padding:24px!important;
}
.lp-preview-stage #hnlp-preview-root{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px 34px 22px 46px!important;
  overflow:visible!important;
}
.lp-preview-stage .hnlp-preview-wrap{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:scale(var(--hnlp-preview-scale,1))!important;
  transform-origin:center center!important;
  flex:0 0 auto!important;
}
/* Cancel earlier fixed preview scales. JS now calculates the correct fit. */
@media(max-width:1200px){
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(var(--hnlp-preview-scale,1))!important}
}
@media(max-width:980px){
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(var(--hnlp-preview-scale,1))!important}
}
@media(max-width:700px){
 .lp-preview-stage .hnlp-preview-wrap{transform:scale(var(--hnlp-preview-scale,1))!important}
}