/* Velora Panda Cards 5299 - decorative illustrations docked on homepage cards.
   No fixed position and no overlay above the header, controls or other cards. */
body.page-home .home-stage8-shell .panda-card-host{position:relative}
body.page-home .home-stage8-shell .panda-card-host>.velora-panda{
  position:absolute!important;pointer-events:none;user-select:none;z-index:2;
  width:var(--panda-card-size,88px);height:auto;left:auto;
  right:var(--panda-card-right,0px);top:auto;bottom:var(--panda-card-bottom,0px);
  opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1);
  transform-origin:75% 100%;transition:opacity .5s ease,transform .65s cubic-bezier(.2,.9,.2,1);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.16));contain:layout style;
}
body.page-home .home-stage8-shell .panda-card-host.panda-card-visible>.velora-panda{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
body.page-home .velora-panda:not([data-panda-card]){display:none!important}
body.page-home .home-stage8-shell .velora-panda-art{width:100%;height:auto;display:block;overflow:visible;transform-origin:50% 86%;animation:vl-card-panda-breathe 3.5s ease-in-out infinite}
body.page-home .home-stage8-shell .velora-panda-bubble{
  display:none;position:absolute;bottom:94%;right:12px;left:auto;max-width:130px;white-space:nowrap;
  background:#fffdf3;color:#27392e;border:1px solid #c8dcbd;border-radius:12px 12px 3px 12px;
  padding:6px 9px;font-size:11px;line-height:1.3;font-weight:800;box-shadow:0 5px 12px rgba(12,35,20,.12);
}
@media(hover:hover) and (min-width:901px){body.page-home .home-stage8-shell .panda-card-host:hover>.velora-panda>.velora-panda-bubble{display:block}}
body.page-home .home-stage8-shell .velora-panda-platform{display:none}
body.page-home .home-stage8-shell .velora-panda :is(.panda-head,.panda-arm-left,.panda-arm-right,.panda-book,.panda-bamboo,.panda-sparkles,.panda-crown){transform-box:fill-box;transform-origin:center;transition:opacity .3s ease,transform .45s ease}
body.page-home .home-stage8-shell .velora-panda :is(.panda-book,.panda-crown){opacity:0;transform:translateY(10px) scale(.72)}
body.page-home .home-stage8-shell .velora-panda .panda-bamboo{opacity:1;transform:rotate(-6deg)}
body.page-home .home-stage8-shell .velora-panda .panda-sparkles{opacity:0;transform:scale(.6)}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="rank"] .panda-crown{opacity:1;transform:translateY(-24px) scale(.9)}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="rank"] :is(.panda-sparkles){opacity:1;transform:scale(1);animation:vl-card-panda-spark 1.5s ease-in-out infinite alternate}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="rank"] .panda-bamboo,body.page-home .home-stage8-shell .velora-panda[data-panda-state="read"] .panda-bamboo{opacity:0}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="read"] .panda-book{opacity:1;transform:translateY(6px) scale(.96)}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="read"] .panda-head,body.page-home .home-stage8-shell .velora-panda[data-panda-state="think"] .panda-head{transform:rotate(9deg) translateY(3px)}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="count"] .panda-head{transform:rotate(-9deg)}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="count"] .panda-arm-left{transform:rotate(-16deg) translate(-4px,-10px)}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="think"] .panda-arm-right{transform:rotate(42deg) translate(-8px,-18px)}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="shop"] .panda-bamboo{transform:rotate(11deg) translateY(-7px)}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="join"] .panda-arm-right,body.page-home .home-stage8-shell .velora-panda[data-panda-state="hello"] .panda-arm-right{animation:vl-card-panda-wave .85s ease-in-out infinite alternate}
body.page-home .home-stage8-shell .velora-panda[data-panda-state="join"] .panda-sparkles{opacity:1;transform:scale(1);animation:vl-card-panda-spark 1.5s ease-in-out infinite alternate}
/* Position within the decorative side of each card; text/actions stay above mascots. */
body.page-home .home-stage8-shell #podyum.panda-card-host{--panda-card-size:105px;--panda-card-right:5px;--panda-card-bottom:0px}
body.page-home .home-stage8-shell #haberler.panda-card-host{--panda-card-size:82px;--panda-card-right:1px;--panda-card-bottom:0px}
body.page-home .home-stage8-shell .monthly-credit-top-five.panda-card-host{--panda-card-size:72px;--panda-card-right:0px;--panda-card-bottom:0px}
body.page-home .home-stage8-shell .home-sidebar-store.panda-card-host{--panda-card-size:74px;--panda-card-right:-5px;--panda-card-bottom:0px}
body.page-home .home-stage8-shell .home-stage4-quick-card.panda-card-host{--panda-card-size:92px;--panda-card-right:1px;--panda-card-bottom:0px}
body.page-home .home-stage8-shell .home-stage4-faq.panda-card-host{--panda-card-size:80px;--panda-card-right:0px;--panda-card-bottom:0px}
body.page-home .home-stage8-shell .home-stage4-join.panda-card-host{--panda-card-size:112px;--panda-card-right:-8px;--panda-card-bottom:0px}
body.page-home .home-stage8-shell .home-latest-player.panda-card-host{--panda-card-size:57px;--panda-card-right:0px;--panda-card-bottom:0px}
/* Give tiny cards enough room for the character without covering real information. */
body.page-home .home-stage8-shell .home-latest-player.panda-card-host{padding-right:58px}
body.page-home .home-stage8-shell .home-stage4-quick-card.panda-card-host>div:not(.velora-panda){max-width:65%;position:relative;z-index:3}
body.page-home .home-stage8-shell .home-stage4-join.panda-card-host>:not(.velora-panda):not(.home-stage4-join-glow){position:relative;z-index:3}
body.page-home .home-stage8-shell .panda-card-host>.velora-panda .panda-sway{transform-origin:50% 84%}
@keyframes vl-card-panda-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes vl-card-panda-wave{from{transform:rotate(-10deg)}to{transform:rotate(25deg) translateY(-5px)}}
@keyframes vl-card-panda-spark{from{opacity:.7;transform:scale(.85)}to{opacity:1;transform:scale(1.15)}}
@media(max-width:900px){
  body.page-home .home-stage8-shell .panda-card-host>.velora-panda{width:min(var(--panda-card-size,75px),75px);bottom:0;right:0}
  body.page-home .home-stage8-shell .home-latest-player.panda-card-host{padding-right:52px}
  body.page-home .home-stage8-shell .home-stage4-quick-card.panda-card-host>div:not(.velora-panda){max-width:70%}
  body.page-home .home-stage8-shell .velora-panda-bubble{display:none!important}
}
@media(max-width:370px){body.page-home .home-stage8-shell .panda-card-host>.velora-panda{width:min(var(--panda-card-size,70px),60px)}body.page-home .home-stage8-shell .home-latest-player.panda-card-host{padding-right:44px}}
@media(prefers-reduced-motion:reduce){body.page-home .home-stage8-shell .panda-card-host>.velora-panda{opacity:1;transform:none;transition:none}body.page-home .home-stage8-shell .velora-panda *{animation:none!important;transition:none!important}body.page-home .home-stage8-shell .velora-panda-art{animation:none!important}}
@media print{body.page-home .home-stage8-shell .velora-panda{display:none!important}}

/* Hotfix35: prevent the decoration from covering real server IP actions. */
body.page-home .home-stage8-shell .home-stage4-join.panda-card-host{--panda-safe-lane:126px}
body.page-home .home-stage8-shell .home-stage4-join.panda-card-host>.home-stage4-ip,
body.page-home .home-stage8-shell .home-stage4-join.panda-card-host>.home-stage4-join-actions{
  width:calc(100% - var(--panda-safe-lane));max-width:100%;
}
/* A dedicated grid track preserves usernames and the last-seen timestamp. */
body.page-home .home-stage8-shell .home-latest-player.panda-card-host{
  grid-template-columns:46px minmax(0,1fr) 64px;
  padding-right:12px;
}
body.page-home .home-stage8-shell .home-latest-player.panda-card-host>i{grid-column:1;grid-row:1 / span 2}
body.page-home .home-stage8-shell .home-latest-player.panda-card-host>span{grid-column:2;grid-row:1}
body.page-home .home-stage8-shell .home-latest-player.panda-card-host>time{grid-column:2;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){
  body.page-home .home-stage8-shell .home-stage4-join.panda-card-host{--panda-safe-lane:84px}
  body.page-home .home-stage8-shell .home-latest-player.panda-card-host{grid-template-columns:46px minmax(0,1fr) 50px;padding-right:12px}
  body.page-home .home-stage8-shell .home-latest-player.panda-card-host>.velora-panda{width:42px}
}
@media(max-width:370px){
  body.page-home .home-stage8-shell .home-stage4-join.panda-card-host{--panda-safe-lane:74px}
}
