/* =====================================================
   PORTRAITS - Portrait System Styling
   Uses CSS variables from themes.css
   ===================================================== */

/* Portrait size tiers */
.portrait-xs {
    width: 48px;
    height: 48px;
}

.portrait-sm {
    width: 64px;
    height: 64px;
}

.portrait-md {
    width: 96px;
    height: 96px;
}

.portrait-lg {
    width: 128px;
    height: 128px;
}

.portrait-xl {
    width: 256px;
    height: 256px;
}

/* Portrait base styles */
.portrait {
    display: inline-block;
    background: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Portrait image */
.portrait > img,
.portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Prevent the "Save Image" callout on mobile portraits */
.portrait img, 
.card-portrait img, 
.combatant-portrait img, 
.hud-tile-bg img, 
.inspector-portrait img,
.hero-portrait {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none; /* Allows taps to pass through to the container */
}

/* Fallback emoji styling */
.portrait-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--rgb-accent), 0.15);
    border: 1px solid var(--clr-accent-dim);
    border-radius: 8px;
    font-size: 50%;
    color: var(--clr-accent);
}

/* Size-specific fallback font sizes */
.portrait-xs.portrait-fallback {
    font-size: 20px;
}

.portrait-sm.portrait-fallback {
    font-size: 28px;
}

.portrait-md.portrait-fallback {
    font-size: 42px;
}

.portrait-lg.portrait-fallback {
    font-size: 56px;
}

.portrait-xl.portrait-fallback {
    font-size: 100px;
}

/* Portrait in combat cards */
.combatant .portrait {
    margin-bottom: 4px;
}

/* Enemy portraits */
.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.portrait-img-xs {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--clr-enemy);
}

.wiki-entry-portrait {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
}

.wiki-detail-portrait {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-right: 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--clr-enemy);
}

/* Portrait container for slots */
.portrait-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Party slot portrait */
.party-slot .portrait-sm {
    margin-right: 8px;
}

/* Slot portrait container */
.slot-portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Roster portrait container */
.roster-portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Ensure portrait img fits in containers */
.slot-portrait .portrait img,
.roster-portrait .portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Recruitment card portrait */
.recruit-card .portrait-lg {
    margin-bottom: 12px;
}

/* Hero detail modal portrait */
.hero-detail .portrait-xl {
    margin-bottom: 16px;
    border: 2px solid var(--clr-accent);
}

/* Armory equipped hero portrait */
.armory-hero-portrait .portrait-md {
    margin-right: 12px;
}

/* Loading state for portraits */
.portrait-loading {
    background: linear-gradient(
        90deg,
        rgba(var(--rgb-accent), 0.1) 25%,
        rgba(var(--rgb-accent), 0.2) 50%,
        rgba(var(--rgb-accent), 0.1) 75%
    );
    background-size: 200% 100%;
    animation: portrait-shimmer 1.5s infinite;
}

@keyframes portrait-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Portrait border variants */
.portrait-bordered {
    border: 2px solid var(--clr-accent);
}

.portrait-bordered.player {
    border-color: var(--clr-player);
}

.portrait-bordered.enemy {
    border-color: var(--clr-enemy);
}

/* Responsive portrait sizes */
@media (max-width: 768px) {
    .portrait-lg {
        width: 96px;
        height: 96px;
    }
    
    .portrait-md {
        width: 72px;
        height: 72px;
    }
    
    .portrait-sm {
        width: 48px;
        height: 48px;
    }
    
    .portrait-xs {
        width: 36px;
        height: 36px;
    }
    
    .portrait-xl {
        width: 180px;
        height: 180px;
    }
}