/* hero-framer.css */

/* Fix parent containers to use relative positioning so absolute children align perfectly */
.hero-card, .hero-slot, .slot {
    position: relative !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
}

/* Base Wrapper (in-flow for tier lists and standard rendering) */
.hero-frame-wrapper {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* If the wrapper is inside a padding-bottom hacked square (.hero-card), it MUST be absolute to fill the square */
.hero-card .hero-frame-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* If the wrapper is inside a fixed-size slot (.hero-slot), it just needs to fill it */
.hero-slot .hero-frame-wrapper, .slot .hero-frame-wrapper {
    width: 100% !important;
    height: 100% !important;
}

/* Base background (solid red square) */
.hero-frame-base-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    object-fit: fill !important; 
    border: none !important;
    box-shadow: none !important;
}

/* The actual hero image */
.hero-framed-portrait {
    z-index: 2 !important;
    position: relative !important;
    width: 82% !important; 
    height: 82% !important;
    object-fit: contain !important;
    border: none !important;
    background: transparent !important;
    top: auto !important;
    left: auto !important;
}

/* Transparent frame border overlay */
.hero-frame-border {
    position: absolute !important;
    top: 1.5% !important;
    left: 1.5% !important;
    width: 97% !important;
    height: 97% !important;
    z-index: 3 !important;
    pointer-events: none !important;
    object-fit: fill !important; 
    border: none !important;
    box-shadow: none !important;
}

/* Pet-specific size overrides */
.is-pet .hero-frame-base-bg, .is-pet .hero-frame-border {
    top: -2% !important;
    left: -2% !important;
    width: 104% !important;
    height: 104% !important;
}

.is-pet .hero-frame-lvl {
    top: -14% !important;
}

/* Level 130 badge */
.hero-frame-lvl {
    position: absolute !important;
    top: -8% !important; 
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 52% !important;
    z-index: 4 !important;
    pointer-events: none !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
}

/* Star badge */
.hero-frame-star {
    position: absolute !important;
    bottom: -1% !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 65% !important;
    z-index: 4 !important;
    pointer-events: none !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
}