/*
 * Cosmetics (shop): avatar frames, cosmetic badge, coloured usernames, profile banner.
 * Loaded on every page (template/head). Works with the Skitzly theme on or off.
 * Frames wrap the avatar <img> in <span class="skz-cos-frame">; users without a frame get no extra markup at all.
 */

.skz-cos-frame {
    position: relative;
    display: inline-block;
    line-height: 0;
    border-radius: 50%;
    vertical-align: middle;
    max-width: 100%;
}
.skz-cos-frame > img:first-child { position: relative; z-index: 1; }

/* Uploaded frame picture: a transparent ring drawn a little larger than the avatar. */
.skz-cos-frame__img {
    position: absolute;
    z-index: 2;
    top: -10%;
    left: -10%;
    width: 120% !important;
    height: 120% !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain;
    pointer-events: none;
}

/* CSS frames: a ring behind / around the avatar. */
.skz-cos-frame__ring {
    position: absolute;
    z-index: 0;
    top: -7%;
    left: -7%;
    width: 114%;
    height: 114%;
    border-radius: 50%;
    pointer-events: none;
}

.skz-cos-frame--frame-glow .skz-cos-frame__ring {
    background: radial-gradient(circle, rgba(124, 92, 255, .95) 55%, rgba(124, 92, 255, 0) 72%);
    animation: skz-cos-breathe 2.6s ease-in-out infinite;
}
.skz-cos-frame--frame-pulse .skz-cos-frame__ring {
    background: #ff4f8b;
    animation: skz-cos-pulse 1.8s ease-out infinite;
}
.skz-cos-frame--frame-neon .skz-cos-frame__ring {
    background: conic-gradient(#00e5ff, #00ff95, #00e5ff);
    box-shadow: 0 0 10px 1px rgba(0, 229, 255, .7);
    animation: skz-cos-spin 4s linear infinite;
}
.skz-cos-frame--frame-ember .skz-cos-frame__ring {
    background: conic-gradient(#ff512f, #f09819, #ffd60a, #ff512f);
    box-shadow: 0 0 12px 1px rgba(255, 110, 40, .65);
    animation: skz-cos-spin 3s linear infinite, skz-cos-breathe 1.6s ease-in-out infinite;
}
.skz-cos-frame--frame-aurora .skz-cos-frame__ring {
    background: conic-gradient(#7c5cff, #23d5ab, #2f80ed, #c86bfa, #7c5cff);
    animation: skz-cos-spin 5s linear infinite;
}
.skz-cos-frame--frame-prism .skz-cos-frame__ring {
    background: conic-gradient(#ff0055, #ff9900, #ffee00, #33dd55, #00bbff, #7755ff, #ff0055);
    box-shadow: 0 0 14px 2px rgba(255, 255, 255, .35);
    animation: skz-cos-spin 2.4s linear infinite;
}

@keyframes skz-cos-spin { to { transform: rotate(360deg); } }
@keyframes skz-cos-breathe { 0%, 100% { opacity: .65; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes skz-cos-pulse { 0% { opacity: .9; transform: scale(.94); } 70% { opacity: 0; transform: scale(1.14); } 100% { opacity: 0; transform: scale(1.14); } }

@media (prefers-reduced-motion: reduce) {
    .skz-cos-frame__ring { animation: none !important; }
}

/* Cosmetic badge next to a name. */
.skz-cos-badge {
    display: inline-block;
    width: 1.1em !important;
    height: 1.1em !important;
    min-width: 1.1em;
    margin-left: .25em;
    vertical-align: middle;
    object-fit: contain;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 0 0 auto;
}

/* Coloured usernames: the colours themselves are inline (they are per user). */
[data-cos-name] { text-decoration-color: currentColor; }

/* Equipped profile banner. */
.skz-cos-banner { object-fit: cover; }

/* ------------------------------------------------------------------ */
/* Shop pages                                                           */
/* ------------------------------------------------------------------ */
.shop-page { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.shop-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.shop-tab { padding: .4rem 1rem; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .35); color: inherit; text-decoration: none !important; font-weight: 600; }
.shop-tab.is-active { background: #7c5cff; border-color: #7c5cff; color: #fff !important; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .9rem; }
.shop-card { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid rgba(128, 128, 128, .25); overflow: hidden; color: inherit; text-decoration: none !important; background: rgba(128, 128, 128, .06); }
.shop-card:hover { border-color: #7c5cff; color: inherit; }
.shop-card__stage { position: relative; display: flex; align-items: center; justify-content: center; height: 118px; padding: .75rem; background: rgba(128, 128, 128, .1); }
.shop-card__stage--banner { padding: 0; }
.shop-card__stage--banner img { width: 100%; height: 100%; object-fit: cover; }
.shop-card__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.shop-card__name-sample { font-weight: 800; font-size: 1.15rem; }
.shop-card__badge-sample .skz-cos-badge { width: 3rem !important; height: 3rem !important; margin: 0; }
.shop-card__body { padding: .6rem .75rem .75rem; display: flex; flex-direction: column; gap: .15rem; }
.shop-card__title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-card__meta { font-size: .8rem; opacity: .75; }
.shop-card__price { font-weight: 800; }
.shop-card__owned { font-size: .75rem; font-weight: 700; color: #12a15c; }
.shop-rarity { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.shop-section-title { font-size: 1.15rem; font-weight: 800; margin: 1.5rem 0 .75rem; }
.shop-preview { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; padding: 1.25rem; border-radius: 16px; border: 1px solid rgba(128, 128, 128, .25); }
.shop-preview__sample { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem; border-radius: 12px; }
.shop-preview__sample--light { background: #f5f5f6; color: #16161d; }
.shop-preview__sample--dark { background: #222222; color: #f1f1f4; }
.shop-preview__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.shop-preview__name { font-weight: 800; font-size: 1.1rem; }
.shop-preview__banner { width: 100%; max-height: 180px; border-radius: 12px; object-fit: cover; }
.shop-btn { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.5rem; border-radius: 999px; border: 1px solid transparent; background: #7c5cff; color: #fff !important; font-weight: 700; text-decoration: none !important; cursor: pointer; }
.shop-btn--ghost { background: transparent; border-color: currentColor; color: inherit !important; }
.shop-btn--small { padding: .35rem .9rem; font-size: .85rem; }
.shop-muted { font-size: .85rem; opacity: .75; }
.shop-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.shop-table th, .shop-table td { padding: .5rem .6rem; border-bottom: 1px solid rgba(128, 128, 128, .2); text-align: left; vertical-align: middle; }
.shop-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .75rem 0; }
.shop-stats dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
.shop-stats dd { margin: 0; font-weight: 700; font-size: 1.1rem; }