/* ==========================================================
   SKINCSALÁD LOGÓK — közös megjelenés (js/data/skinFamilyLogos.js)
   Hőskódex skinkártya + skin modal, Vásárcsarnok skinkártya,
   Skin kódex (Saját skinek + Skincsaládok fejléc).
   ========================================================== */

img.skin-family-logo {
    aspect-ratio: auto;
    display: block;
    flex: none;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .85)) drop-shadow(0 0 7px rgba(255, 228, 170, .16));
    transition: transform .3s ease, filter .3s ease;
}

/* Kártyákon: a kártya hoverére finoman kiemelkedik és felizzik. */
img.skin-family-logo--card {
    width: clamp(104px, 36%, 168px);
    transform-origin: left center;
}

:is(.skin-card, .sic-card, .vshop-card-wrap):hover .skin-family-logo,
:is(.skin-card, .sic-card):focus-visible .skin-family-logo {
    transform: translateY(-1px) scale(1.04);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .9)) drop-shadow(0 0 11px rgba(255, 232, 178, .38));
}

/* Hőskódex skinkártya: logó a tier-jelvény fölött, bal felül. */
.skin-card-topline:has(.skin-card-topline-main) { align-items: flex-start; }
.skin-card-topline-main { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }

/* Vásárcsarnok: kis ikon a skincsalád-címke mellett. */
.vshop-card-skin-themerow {
    position: absolute;
    z-index: 4;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 88px);
    pointer-events: none;
}

.vshop-card-skin-themerow > .vshop-card-skin-theme,
#vshop-shell .vshop-card-skin-themerow > .vshop-card-skin-theme {
    position: static;
    flex: none;
    max-width: none;
    white-space: nowrap;
}

img.skin-family-logo--shop {
    flex: 0 1 80px;
    width: 80px;
    min-width: 44px;
    transform-origin: left center;
}

/* Skin vásárlási modal: nagy logó a banner bal felső sarkában. */
.hero-purchase-modal-window--skin .hero-purchase-modal-banner {
    position: relative;
}

.skin-family-logo--modal,
.hero-purchase-modal-banner img.skin-family-logo--modal {
    position: absolute;
    height: auto;
    object-fit: contain;
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 5;
    top: 14px;
    left: 14px;
    width: clamp(150px, 36%, 250px);
    animation: skin-family-logo-enter .55s cubic-bezier(.2, .9, .3, 1.2) both, skin-family-logo-glow 4.5s ease-in-out .55s infinite;
}

/* Skin kódex — Skincsaládok fejléc. */
img.skin-family-logo--family {
    width: clamp(130px, 15vw, 200px);
}

.sic-family-section:hover .skin-family-logo--family {
    transform: scale(1.035);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .9)) drop-shadow(0 0 12px rgba(255, 232, 178, .32));
}

@keyframes skin-family-logo-enter {
    from { opacity: 0; transform: translateY(-6px) scale(.9); }
    to { opacity: 1; transform: none; }
}

@keyframes skin-family-logo-glow {
    0%, 100% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .85)) drop-shadow(0 0 7px rgba(255, 228, 170, .16)); }
    50% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .85)) drop-shadow(0 0 14px rgba(255, 232, 178, .4)); }
}

@media (max-width: 640px) {
    .hero-purchase-modal-banner img.skin-family-logo--modal { top: 10px; left: 10px; width: clamp(120px, 40%, 180px); }
    img.skin-family-logo--shop { flex-basis: 66px; width: 66px; }
}

@media (prefers-reduced-motion: reduce) {
    .skin-family-logo { transition: none; }
    .skin-family-logo--modal { animation: none; }
}

/* Skin fejlesztés (Skinlabor) kártya: logó a jobb felső sarokban, a „Fejlesztett forma” címkével szemben. */
.su-card-visual > img.skin-family-logo--upgrade {
    position: absolute;
    z-index: 4;
    top: 10px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: clamp(110px, 34%, 150px);
    height: auto;
    border-radius: 0;
    object-fit: contain;
    mask-image: none;
    -webkit-mask-image: none;
    transform: none;
    transform-origin: right top;
}

.su-card:hover .su-card-visual > img.skin-family-logo--upgrade,
.su-card:focus-visible .su-card-visual > img.skin-family-logo--upgrade {
    transform: translateY(-1px) scale(1.04);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .9)) drop-shadow(0 0 11px rgba(255, 232, 178, .38));
}