pb-card-wall {
  display: block;
  


  position: fixed;
  inset: auto 0 0 0;
  height: 22rem;
  overflow: hidden;
  pointer-events: none;
  z-index: -1; 
  
  perspective: 42rem;
  

  perspective-origin: 50% 62%;
  

  transform: scale(var(--wall-k, 1));
  transform-origin: 50% 100%;
}




pb-card-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  
  background:
    linear-gradient(to right, var(--bg) 0%, transparent 16%),
    linear-gradient(to left, var(--bg) 0%, transparent 16%),
    linear-gradient(to top, transparent 0%, transparent 22%, var(--bg) 58%);
}
.pba.is-intro { position: relative; isolation: isolate; }










pb-card-wall.is-rising .pbw-row {
  animation: pbw-row-in 0.6s var(--ease) calc(var(--rise-d, 0ms) + var(--ri, 0) * 45ms) backwards;
}



.pbw-row { will-change: transform, opacity; }




@keyframes pbw-row-in {
  0%   { translate: 0 135%; opacity: 0; }
  30%  { opacity: 1; }
  100% { translate: 0 0; opacity: 1; }
}





.pba.is-chat pb-card-wall { display: none; }
@media (prefers-reduced-motion: reduce) {
  pb-card-wall.is-rising .pbw-row { animation: none; }
}


.pbw-row {
  position: absolute;
  left: 50%;
  



  bottom: calc(var(--b) + 2.25rem / var(--wall-k, 1));
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  transform: translateX(calc(-50% + var(--dx, 0rem))) scale(var(--s, 1));
  transform-origin: bottom center;
  transform-style: preserve-3d; 
  



  filter: saturate(var(--sat, 1)) brightness(calc(1 + (1 - var(--br, 1)) * 0.25));
}

[data-theme="dark"] .pbw-row {
  filter: saturate(var(--sat, 1)) brightness(var(--br, 1));
}







.pbw-slot {
  flex: none;
  display: block;
  transform:
    translateZ(calc(var(--k) * var(--k) * -0.45rem))
    rotateY(calc(var(--k) * -2.25deg));
}


.pbw-card {
  display: block;
  position: relative;
  
  width: 10.5rem;
  height: 12.5rem;
  

  padding: 0.375rem;
  border-radius: 0.875rem;
  background: var(--surface);
  pointer-events: auto;
  

  transform-origin: bottom center;
  
  transition: transform 0.55s var(--ease);
}
.pbw-card:hover {
  transform: translateY(-1.25rem) rotate(var(--rot, 0deg));
  
  transition: transform 0.16s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .pbw-card, .pbw-card:hover { transform: none; transition: none; }
}




.pbw-banner {
  display: block;
  height: 3.25rem;
  border-radius: var(--r-md);
  background:
    var(--cat-grad,
      var(--wg,
        radial-gradient(130% 130% at 80% 12%, #e4dcec 0%, transparent 55%),
        linear-gradient(120deg, #a6c0b4, #aeabde)));
  overflow: hidden;
}
[data-theme="dark"] .pbw-banner { filter: saturate(0.94) brightness(0.82); }



.pbw-av {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  width: 2.875rem;
  height: 2.875rem;
  margin: -1.45rem 0 0 0.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar);
  box-shadow: 0 0 0 0.25rem var(--surface);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: var(--track-body);
  color: var(--text-soft);
}
.pbw-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.pbw-banner[data-g="1"] { --wg: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #e6ddec 52%, #aeabde 100%); }
.pbw-banner[data-g="2"] { --wg: radial-gradient(140% 150% at 22% 18%, #aeabde 0%, #e6ddec 52%, #f2cd78 100%); }
.pbw-banner[data-g="3"] { --wg: radial-gradient(140% 150% at 22% 18%, #f2cd78 0%, #aeabde 52%, #7fd49a 100%); }
.pbw-banner[data-g="4"] { --wg: radial-gradient(140% 150% at 22% 18%, #f2cd78 0%, #f0763c 52%, #ef8f66 100%); }
.pbw-banner[data-g="5"] { --wg: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #e6ddec 52%, #f2cd78 100%); }
.pbw-banner[data-g="6"] { --wg: radial-gradient(140% 150% at 22% 18%, #a6c0b4 0%, #7fd49a 52%, #e6ddec 100%); }
.pbw-banner[data-g="7"] { --wg: radial-gradient(140% 150% at 22% 18%, #ef8f66 0%, #dd83c2 52%, #aeabde 100%); }
.pbw-banner[data-g="8"] { --wg: radial-gradient(140% 150% at 22% 18%, #7fd49a 0%, #aeabde 52%, #e6ddec 100%); }







@media (max-width: 767.98px) {
  pb-card-wall {
    left: 50%;
    right: auto;
    width: calc(100% / var(--wall-k, 1));
    transform: translateX(-50%) scale(var(--wall-k, 1));
  }
  


  .pbw-row { bottom: calc(var(--b) + (4.25rem + env(safe-area-inset-bottom, 0px)) / var(--wall-k, 1)); }
  

  pb-card-wall::after {
    background:
      linear-gradient(to right, var(--bg) 0%, transparent 16%),
      linear-gradient(to left, var(--bg) 0%, transparent 16%),
      linear-gradient(to top, transparent 0%, transparent 34%, var(--bg) 76%);
  }
}