/* Small, presentation-only skill icons in both themes. Rarity remains on the original labels. */
.jp-skill-label{display:inline;position:static;white-space:normal}
.jp-skill-icon{display:inline-block;width:24px;height:24px;min-width:24px;margin-right:6px;vertical-align:middle;border-radius:4px;background-size:400% 400%;background-repeat:no-repeat;background-color:#10131e;box-shadow:0 0 0 1px rgba(180,203,237,.28);pointer-events:none}
.jp-skill-icon.jp-small{width:18px;height:18px;min-width:18px;margin-right:4px}
.jp-skill-text{vertical-align:middle;overflow-wrap:anywhere}
html[data-ui-style=midnight] .jp-skill-label:before{content:none}
.skill-btn .jp-skill-icon{width:26px;height:26px;min-width:26px}
.rec-type .jp-skill-icon,.opp-bid-skill .jp-skill-icon{width:18px;height:18px;min-width:18px;margin-right:4px}

/* The icon spans the name and description; both text rows share a left edge. */
.jp-skill-row{position:relative;box-sizing:border-box;min-height:36px;padding-left:44px;text-align:left}
.jp-skill-row .jp-skill-label>.jp-skill-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:36px;height:36px;min-width:36px;margin:0}
.jp-skill-row>div,.jp-skill-row>small,.jp-skill-row>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-skill-row .jp-skill-text{vertical-align:baseline}
.skill-btn{position:relative}
.skill-btn .s-name,.skill-btn .s-desc{padding-left:44px;box-sizing:border-box;text-align:left}
.skill-btn .s-name>.jp-skill-label>.jp-skill-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;min-width:36px;margin:0}
.skill-btn .s-name,.skill-btn .s-desc{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Auction preference also covers dynamically rendered opponent/record labels. */
html:not([data-auction-skill-icons=on]) #page-game .jp-skill-icon{display:none}
html:not([data-auction-skill-icons=on]) #page-game .skill-btn .s-name,
html:not([data-auction-skill-icons=on]) #page-game .skill-btn .s-desc,
html:not([data-auction-skill-icons=on]) #page-game .jp-skill-row{padding-left:0}