/* =========================================
   ORBIS RPG — RESTORED SKILLS BOOK CARDS
   Use the original two-column dark skill cards and numbered combat slots
   declared in style.css. The previously loaded "ICON TILES" layer hid
   titles/ranks and forced a four-column artwork grid; removing those
   overrides restores the approved old readable layout.
   Skill actions, detailed skill modal and all rank data are unchanged.
   ========================================= */

/* Image support + class reset styling remain from the previous stylesheet. */
#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;
}

/* Скидання класу — в розділі класових навиків, не всередині квадратів навиків. */
#skills-list-container .skills-book-class-reset {
    margin: 14px 4px 5px;
    padding: 10px;
    border: 1px solid rgba(169, 124, 51, .5);
    border-radius: 9px;
    background: rgba(202, 165, 93, .10);
}
#skills-list-container .skills-book-class-reset-btn {
    display: block;
    width: 100%;
    padding: 11px 9px;
    color: #fff8e7;
    background: #71481e;
    border: 1px solid #c49653;
    border-radius: 7px;
    font: 700 14px/1.3 inherit;
    cursor: pointer;
    touch-action: manipulation;
}
#skills-list-container .skills-book-class-reset-note {
    margin: 8px 5px;
    color: #6e4b23;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

/* =========================================
   COMPACT COMBAT SLOTS — mobile book UI
   The old cards stay two columns, only the 6–8 battle slots shrink.
   The two-row selector scrolls away with the book rather than
   hiding learned skills under a permanently sticky overlay.
   ========================================= */
#skills-list-container .book-equipped-skills {
    position: static;
    top: auto;
    z-index: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(52px, 14.5vw, 62px);
    gap: 5px;
    padding: 3px 1px 4px;
    margin: 0 0 8px;
    background: transparent;
}
#skills-list-container .book-skill-slot {
    min-height: 0;
    height: 100%;
    padding: 3px 2px;
    overflow: hidden;
    border-width: 1px;
}
#skills-list-container .book-skill-slot-number {
    top: 2px;
    left: 4px;
    font-size: 9px;
}
#skills-list-container .book-skill-slot-icon {
    margin-top: 4px;
    font-size: 21px;
    line-height: 1;
}
#skills-list-container .book-skill-slot-name {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#skills-list-container .book-skill-slot-mastery {
    margin-top: 1px;
    font-size: 8px;
}
#skills-list-container .book-skill-remove {
    top: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
}


/* =========================================
   SLOT PICKER — SHOW ALREADY EQUIPPED SKILLS
   Four slots per row, small skill arts (no names/mastery text).
   Applies to the skill detail dialog only, not the combat bar.
   ========================================= */
#skill-detail-body .skill-card-slot-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
}
#skill-detail-body .skill-card-slot-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 56px;
    padding: 3px 2px;
    overflow: hidden;
    border-radius: 6px;
    touch-action: manipulation;
}
#skill-detail-body .skill-card-slot-btn[data-occupied="true"] {
    background: linear-gradient(145deg, #3a2a1c, #201713);
}
#skill-detail-body .skill-card-slot-btn.active {
    border: 2px solid #eac266;
    box-shadow: 0 0 0 1px rgba(255, 212, 117, .45) inset;
}
#skill-detail-body .skill-slot-picker-number {
    position: absolute;
    top: 2px;
    left: 5px;
    z-index: 1;
    font-size: 10px;
    line-height: 1;
    color: #f9e7bd;
    text-shadow: 0 1px 3px #000;
}
#skill-detail-body .skill-slot-picker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 9vw, 36px);
    height: clamp(28px, 9vw, 36px);
    max-width: 100%;
    overflow: hidden;
    border-radius: 4px;
    font-size: 26px;
    line-height: 1;
}
#skill-detail-body .skill-slot-picker-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
#skill-detail-body .skill-slot-picker-empty {
    font-size: 18px;
    font-weight: 700;
}