.availability-badge { display: inline-flex; width: fit-content; align-items: center; margin-top: .35rem; padding: .25rem .55rem; border: 1px solid #f3b35255; border-radius: 999px; background: #f3b35212; color: #ffd594; font-weight: 600; font-size: .875rem; line-height: 1.2; white-space: nowrap; }
.card-caption .availability-badge { font-size: .875rem; line-height: 1.2; }
.promo-strip { margin-bottom: 1.5rem; }
.promo-strip .panel-head p { max-width: 48rem; margin: .55rem 0 0; color: var(--muted, #b8a9c9); font-size: 1rem; line-height: 1.6; }
.otw-preview { border-color: #a75bef55; background-image: linear-gradient(115deg, #8b36ad0c, #ff9d0008); }
.promo-detail-note { padding: .8rem 1rem; border: 1px solid #f3b35244; border-radius: .75rem; color: #ffd594; background: #f3b3520c; font-size: 1rem; line-height: 1.5; }
.squad-coming-soon { position: absolute; top: -.3rem; left: 50%; transform: translateX(-50%); padding: .2rem .5rem; border-radius: .4rem; color: #ffd594; background: #21112fee; font-size: .875rem; font-weight: 700; white-space: nowrap; z-index: 5; }
.presence-status { display: flex !important; flex-shrink: 0; font-size: .875rem; white-space: nowrap; }
.presence-status[data-state="connecting"] i, .presence-status[data-state="unavailable"] i { background: #a994b9; box-shadow: none; animation: none; }
@media (max-width: 760px) { .promo-strip .panel-head { align-items: flex-start; flex-wrap: wrap; gap: .8rem; } .presence-status { grid-column: 1 / -1; justify-self: end; padding: .4rem .65rem; margin: 0 0 .25rem; } }