.pfeed { position: relative; display: block; width: 100%; height: 3.6rem; padding: 0; overflow: hidden; border: 0; background: none; color: var(--color-web-paper); text-align: left; cursor: pointer; }
.pfeed[hidden] { display: none; }

.pfeed__card {
  --rc: var(--color-web-line);
  --cut: .7rem;
  position: absolute; inset: 0; display: flex; align-items: center; gap: .55rem; padding: 0 .35rem 0 .5rem; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 34%, var(--color-web-ink)), var(--color-web-ink) 62%);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.pfeed--s3 { --rc: var(--color-web-violet-light); }
.pfeed--s4, .pfeed--s5 { --rc: var(--color-web-gold); }
.pfeed--s6 { --rc: var(--color-web-lime); }
.pfeed__card.is-me { background: linear-gradient(90deg, var(--color-web-lime-dark), var(--color-web-ink) 62%); }

.pfeed__pic { position: relative; flex: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; overflow: hidden; border-radius: 50%; background: var(--color-web-ink3); box-shadow: 0 0 0 .14rem var(--rc); color: var(--color-web-paper); font-family: var(--font-display); }
.pfeed__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pfeed__txt { flex: 1 1 0; display: grid; gap: .05rem; min-width: 0; }
.pfeed__who { display: flex; gap: .25em; min-width: 0; font-size: .875rem; line-height: 1.2; white-space: nowrap; }
.pfeed__who span { flex: none; }
.pfeed__who b { min-width: 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; }
.pfeed__got { display: flex; align-items: baseline; gap: .4rem; min-width: 0; white-space: nowrap; }
.pfeed__name { flex: 0 1 auto; min-width: 3.5rem; overflow: hidden; font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; text-overflow: ellipsis; }
.pfeed__got .estars { flex: none; font-size: .875rem; color: var(--rc); }
.pfeed__got .estars--6 { color: transparent; }

.pfeed__when { flex: 0 100 auto; min-width: 0; overflow: hidden; color: var(--color-web-mist2); font-size: .875rem; text-overflow: ellipsis; }
.pfeed__card .stand { flex: none; width: 3rem; height: 3rem; align-content: center; overflow: hidden; }


.pfeed__card.is-in { animation: pfeed-in var(--motion-slow) var(--motion-ease-back) both; }
.pfeed__card.is-out { animation: pfeed-out calc(var(--motion-slow) * .6) var(--motion-ease-out) both; }
@keyframes pfeed-in { from { transform: translateY(105%); opacity: 0; } }
@keyframes pfeed-out { to { transform: translateY(-105%); opacity: 0; } }

.pfeed--s4.is-in::after, .pfeed--s5.is-in::after, .pfeed--s6.is-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--color-web-glass) 50%, transparent 70%); pointer-events: none; animation: pfeed-shine var(--motion-slow) var(--motion-ease-out) var(--motion-base) both; }
@keyframes pfeed-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }


.pfeed.is-float { position: absolute; top: 0; left: 0; right: 0; z-index: 3; width: auto; height: 3rem; max-width: 17rem; margin: 0 auto; overflow: visible; filter: drop-shadow(0 .2rem .4rem var(--color-web-shade)); }
.pfeed.is-float .pfeed__card { --cut: .55rem; gap: .45rem; padding: 0 .3rem 0 .4rem; }
.pfeed.is-float .pfeed__pic { width: 2.2rem; height: 2.2rem; box-shadow: 0 0 0 .12rem var(--rc); }
.pfeed.is-float .pfeed__name { font-size: 1rem; }
.pfeed.is-float .stand { width: 2.4rem; height: 2.4rem; }
@media (orientation: landscape) and (min-width: 56rem) { .pfeed.is-float { max-width: 20rem; } }
.pfeed.is-float .pfeed__card.is-in { animation-name: pfeed-drop; }
.pfeed.is-float .pfeed__card.is-out { animation-name: pfeed-lift; }
@keyframes pfeed-drop { from { transform: translateY(-1.2rem) scale(.96); opacity: 0; } }
@keyframes pfeed-lift { to { transform: translateY(-.8rem) scale(.98); opacity: 0; } }
@media (max-width: 30rem) { .pfeed.is-float .pfeed__when { display: none; } } 
.partner > .bubble { transition: opacity var(--motion-fast) var(--motion-ease-out); }

@media (orientation: portrait), (max-width: 55.99rem) {
  .partner:has(> .pfeed.is-float:not([hidden])) > .bubble { opacity: 0; }
}


.gacha > .pfeed { grid-column: 1 / -1; }
@media (orientation: landscape) and (min-width: 56rem) {
  .gacha > .pfeed .pfeed__card { justify-content: center; background: linear-gradient(90deg, var(--color-web-ink) 15%, color-mix(in srgb, var(--rc) 34%, var(--color-web-ink)) 50%, var(--color-web-ink) 85%); }
  .gacha > .pfeed .pfeed__txt { flex: 0 1 auto; }
}


.pfeed-all { display: grid; gap: .4rem; }
.pfeed-all .pfeed__card { position: relative; inset: auto; min-height: 3.6rem; color: var(--color-web-paper); animation: pfeed-row var(--motion-base) var(--motion-ease-out) calc(var(--i, 0) * var(--motion-stagger)) both; }
@keyframes pfeed-row { from { transform: translateX(-.8rem); opacity: 0; } }
.pfeed__ball { flex: none; }