/*
 * Shadow Time — shared Appearance runtime components.
 *
 * Canonical bridge extracted from the proven Account Appearance UI so the
 * game-shell Personalization popup and /account-appearance.php render the
 * SAME avatar-frame crop/overlay and the SAME compact status pills.
 * Do not create local copies in module CSS.
 */

.account-appearance-card__status {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(5px);
}

.account-appearance-card__status,
.account-appearance-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border: 1px solid rgba(202, 166, 255, .20);
    border-radius: 999px;
    background: rgba(81, 51, 120, .22);
    color: rgba(232, 221, 248, .82);
    font-size: .66rem;
    font-style: normal;
    font-weight: 600;
}

.account-appearance-card__status.is-selected,
.account-appearance-status.is-selected {
    border-color: rgba(201, 164, 255, .50);
    background: rgba(112, 73, 173, .34);
    color: #f2e7ff;
}

.account-appearance-card__status.is-owned,
.account-appearance-status.is-owned {
    border-color: rgba(118, 226, 168, .36);
    background: rgba(38, 119, 76, .20);
    color: #a7f3d0;
}

.account-appearance-card__status.is-premium,
.account-appearance-status.is-premium {
    border-color: rgba(246, 214, 140, .36);
    background: rgba(137, 99, 31, .17);
    color: #f6d68c;
}

.account-appearance-card__status.is-locked,
.account-appearance-status.is-locked {
    color: rgba(217, 198, 240, .70);
}

/* PERS-001a3h2 / dev.150 - lokalny podgląd ramek w Panelu gracza.
   Używa tego samego inline cropu avatara, ale izoluje preview od globalnych styli kart/tła. */
.account-avatar-frame-demo {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    overflow: visible !important;
    isolation: isolate;
    background: transparent !important;
}
.account-avatar-frame-demo--card {
    width: 88px !important;
    height: 88px !important;
    margin: 12px auto !important;
}
.account-avatar-frame-demo--stage {
    width: min(190px, 58%) !important;
    min-width: 150px;
    height: auto !important;
}
.account-avatar-frame-demo__clip {
    position: absolute !important;
    z-index: 1 !important;
    inset: 9% !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    border: 1px solid rgba(202,166,255,.22);
    border-radius: 18% !important;
    background: rgba(8,8,16,.72) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.account-avatar-frame-demo.has-frame .account-avatar-frame-demo__clip {
    border-color: transparent !important;
    box-shadow: none !important;
}
.account-avatar-frame-demo__clip > img.st-avatar-crop {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    filter: none !important;
}
.account-avatar-frame-demo__frame {
    position: absolute !important;
    z-index: 4 !important;
    inset: 0 !important;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent var(--st-avatar-cosmetic-frame) center / 100% 100% no-repeat !important;
    pointer-events: none !important;
}
.account-avatar-frame-demo.has-frame > .account-avatar-frame-demo__frame {
    display: block !important;
}
.account-appearance-card__visual.is-avatar-frame {
    display: grid !important;
    place-items: center !important;
}
.account-appearance-card__visual.is-avatar-frame > .account-avatar-frame-demo {
    position: relative !important;
    inset: auto !important;
    width: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    background: transparent !important;
}
.account-appearance-avatar-frame-preview {
    z-index: 4 !important;
}
.account-appearance-stage.is-avatar-frame .account-appearance-stage__fade {
    z-index: 2;
}
@media (max-width: 760px) {
    .account-avatar-frame-demo--stage {
        width: min(172px, 62%) !important;
        min-width: 132px;
    }
}