/* =========================================
   SKILLS BOOK UI — ICON TILES
   Keeps the existing skills-book structure:
   combat slots -> learned skills -> class skills.
   Only the compact list presentation changes.
   ========================================= */

/* Shared spacing for the compact skill grids. */
#skills-list-container {
    --skills-book-gap: 6px;
}

/* =========================================
   COMBAT SKILL SLOTS
   4 columns: 6 slots = 4 + 2, 8 slots = 4 + 4.
   ========================================= */
#skills-list-container .book-equipped-skills {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--skills-book-gap);
    width: 100%;
    margin-bottom: 16px;
}

#skills-list-container .book-skill-slot {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 12%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("../assets/ui/battle/battle-skill-slot.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: none;
    color: #f4e5c3;
}

#skills-list-container .book-skill-slot.empty {
    opacity: .62;
}

/* In the compact slot only the skill art/icon remains. */
#skills-list-container .book-skill-slot-number,
#skills-list-container .book-skill-slot-name,
#skills-list-container .book-skill-slot-mastery {
    display: none;
}

#skills-list-container .book-skill-slot-icon {
    width: 100%;
    height: 100%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    font-size: clamp(26px, 9vw, 42px);
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 3px rgba(0,0,0,.85);
}

/* Remove stays functional but does not consume layout space. */
#skills-list-container .book-skill-remove {
    position: absolute;
    top: 5%;
    right: 6%;
    z-index: 3;

    width: 20px;
    height: 20px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(230,190,105,.7);
    border-radius: 50%;
    background: rgba(28,17,11,.82);
    color: #f4d68b;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

/* =========================================
   LEARNED + AVAILABLE CLASS SKILLS
   4 square tiles per row.
   ========================================= */
#skills-list-container .learned-skills-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--skills-book-gap);
    width: 100%;
}

#skills-list-container .learned-skills-grid > .learned-skill-card:not(:has([data-select-class])) {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 12%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("../assets/ui/battle/battle-skill-slot.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: none;
    color: #f4e5c3;
}

/* The complete card still exists in DOM and is copied into the
   existing detail modal when the tile is tapped. In the grid we show
   only the art/icon. */
#skills-list-container .learned-skills-grid > .learned-skill-card:not(:has([data-select-class])) > :not(.learned-skill-header) {
    display: none !important;
}

#skills-list-container .learned-skills-grid > .learned-skill-card:not(:has([data-select-class])) .learned-skill-header {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

#skills-list-container .learned-skills-grid > .learned-skill-card:not(:has([data-select-class])) .learned-skill-title-wrap,
#skills-list-container .learned-skills-grid > .learned-skill-card:not(:has([data-select-class])) .learned-skill-name,
#skills-list-container .learned-skills-grid > .learned-skill-card:not(:has([data-select-class])) .learned-skill-rank,
#skills-list-container .learned-skills-grid > .learned-skill-card:not(:has([data-select-class])) .skill-level-lock {
    display: none !important;
}

#skills-list-container .learned-skills-grid > .learned-skill-card:not(:has([data-select-class])) .learned-skill-icon {
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    font-size: clamp(26px, 9vw, 42px);
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 3px rgba(0,0,0,.85);
}

/* Locked skill keeps the same frame but reads clearly as unavailable. */
#skills-list-container .learned-skills-grid > .learned-skill-card.skill-locked-by-level:not(:has([data-select-class])) {
    opacity: .48;
    filter: grayscale(1);
    background-color: transparent;
    border: 0;
}

/* Empty-state message must occupy the whole grid width. */
#skills-list-container .learned-skills-grid > .skills-book-empty {
    grid-column: 1 / -1;
}

/* =========================================
   CLASS PICKER EXCEPTION
   Class choice is not a skill tile, so keep its readable card layout.
   ========================================= */
#skills-list-container .learned-skills-grid > .learned-skill-card:has([data-select-class]) {
    grid-column: span 2;
    aspect-ratio: auto;
    min-height: 92px;
    padding: 8px;
    cursor: pointer;
}

#skills-list-container .learned-skills-grid > .learned-skill-card:has([data-select-class]) > .forge-upgrade-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
}

/* =========================================
   FUTURE IMAGE ICON SUPPORT
   If skill icons are later rendered as <img>, they automatically fill
   the art area without changing the tile layout.
   ========================================= */
#skills-list-container .book-skill-slot-icon img,
#skills-list-container .learned-skill-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}