/* =========================================
   SKILL ART UI
   WebP skill art with emoji fallback.
   ========================================= */

.skill-art-image {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.learned-skill-icon.has-skill-art {
    width:36px;
    height:36px;
    min-width:36px;
    overflow:hidden;
    border-radius:4px;
    font-size:0;
}

#skills-list-container
.learned-skill-icon.has-skill-art {
    width:30px;
    height:30px;
    min-width:30px;
}

.book-skill-slot-icon.has-skill-art {
    width:30px;
    height:30px;
    margin:4px auto 0;
    overflow:hidden;
    border-radius:3px;
    font-size:0;
}

.skill-book-info-icon.has-skill-art {
    width:72px;
    height:72px;
    margin:0 auto 10px;
    overflow:hidden;
    border-radius:6px;
    font-size:0;
}

.action-slot {
    position:relative;
    overflow:hidden;
}

.action-slot > .battle-skill-art {
    position:absolute;
    inset:2px;
    z-index:1;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    object-fit:cover;
    border-radius:4px;
    pointer-events:none;
}

/* Battle UI V5 intentionally hides ordinary slot children.
   Skill art is the one visual child that must remain visible. */
#battle-action-panel
.battle-skills-row >
.action-slot.main-slot.has-skill-art >
.battle-skill-art {
    display:block !important;
}

.action-slot.has-skill-art
.skill-slot-subtext {
    position:relative;
    z-index:2;
    text-shadow:
        0 1px 2px #000,
        0 0 3px #000;
}


/* MP cost badge on battle skill icons. */
#battle-action-panel
.battle-skills-row >
.action-slot.main-slot >
.battle-skill-mp-cost {
    position:absolute !important;
    right:8% !important;
    bottom:8% !important;
    z-index:4 !important;
    display:block !important;
    min-width:0 !important;
    padding:1px 4px !important;
    border:1px solid rgba(121,183,255,.72) !important;
    border-radius:5px !important;
    background:rgba(7,24,48,.88) !important;
    color:#d9edff !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:clamp(7px,2.1vw,9px) !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    text-shadow:0 1px 2px #000 !important;
    pointer-events:none !important;
}

#battle-action-panel
.battle-skills-row >
.action-slot.main-slot.has-skill-art >
.battle-skill-mp-cost {
    display:block !important;
}