/**************************************
** Char equipment
**************************************/
.charEquipmentItemCategoryContainer {
	width: 100%;
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
	margin-bottom: 2px;
    margin-top: 2px;
}
.charEquipmentItemContainer {
	width: 70px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/img/background/equipment/equipmentBox.webp);
}
.charEquipmentItemContainerBox{
	width: 100%;
    height: 55px;
    background-image: url(../assets/img/background/equipment/equipmentBox.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
	pointer-events: none;
}
.charEquipmentItemContainerBoxItem {
	width: 40px;
    height: 40px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
	pointer-events: none;
}
.charEquipmentItemContainerTitle {
	width: 100%;
    height: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    font-size: small;
    font-weight: normal;
    padding-top: 5px;
	pointer-events: none;
}
.charEquipmentResumeContainer {
	width: stretch;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    font-size: larger;
    text-shadow: 0px 0px 10px #000000;
    background-color: #00000040;
    background-image: url(../assets/img/background/skillTreeBG.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 15px;
	border-radius: 5px;
}
.charEquipmentResumeName {
	width: 100%;
    font-weight: bold;
    font-size: larger;
    margin: 5px;
    text-shadow: none;
}
.charEquipmentResumePicture {
    width: 60px;
    height: 60px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 1px;
}
.charEquipmentResumeText {
	width: 100%;
    font-weight: bold;
    margin: 5px;
    text-shadow: none;
}
.charEquipmentStatsDetailContainer {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    font-size: small;
    font-weight: normal;
}
.charEquipmentResumeCombatAttrContainer {
	display: flex;
    flex-wrap: wrap;
    align-content: center;
	justify-content: center;
}
.charProfileExpBarContainer {
    margin-right: 10px;
    margin-left: 5px;
    width: 100%;
}
.charProfileResumeCombatAttrBonus {
	color: #057305;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bolder;
	text-shadow: none;
}
.charProfileResumeCombatAttrPenalty {
	color: #b32323;
    padding-left: 5px;
	padding-right: 5px;
    font-weight: bolder;
	text-shadow: none;
}


/* Belt 2.0.1 — each visual square is one single prepared consumable. */
.lorBeltSection{padding:10px;color:#e8d3a2}
.lorBeltTitle{text-align:center;font-weight:bold;margin-bottom:8px}
.lorBeltGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0}
.lorBeltBox{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;aspect-ratio:1/1;max-width:66px;border:2px ridge #9a713f;border-radius:5px;background:#1f191b;color:#e4c494;cursor:pointer;padding:4px}
.lorBeltBox img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.lorBeltPlus{font-size:20px;opacity:.55}
.lorBeltNumber{position:absolute;bottom:1px;right:3px;font:10px sans-serif;color:#e9d6aa;text-shadow:1px 1px #000}
.lorBeltBox:focus-visible{outline:2px solid #f3d18f;outline-offset:1px}
.lorBeltBox:hover{box-shadow:inset 0 0 8px rgba(250,210,104,.25)}
.lorBeltItemCapacity{margin:6px 0;color:#efcd8a}
.lorBeltItemBox{cursor:default}

/* LOR 2.0.2 — compact potion belt slots in Equipment and displayItem(). */
.lorBeltSection{padding:5px 8px 7px}
.lorBeltTitle{margin-bottom:3px;font-size:12px}
.lorBeltGrid{display:grid;grid-template-columns:repeat(4,minmax(0,46px));justify-content:center;gap:5px;margin:5px auto;max-width:220px}
.lorBeltBox{box-sizing:border-box;width:46px;max-width:46px;min-height:46px;max-height:46px;aspect-ratio:1/1;padding:3px;cursor:pointer}
.lorBeltBox img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.lorBeltBox.lorBeltInactive{opacity:.5;cursor:default}
.lorBeltItemGrid{grid-template-columns:repeat(4,minmax(0,44px));max-width:212px;justify-content:center}
.lorBeltItemGrid .lorBeltBox{width:44px;max-width:44px;min-height:44px;max-height:44px}
.lorBeltItemCapacity{text-align:center;margin:5px 0 2px}
@media(max-width:420px){.lorBeltSection{padding:4px 6px}.lorBeltGrid{gap:4px;margin:4px auto}}

/* Empty equipment categories with no equippable bag item are inert. */
.charEquipmentItemContainer.lorEquipUnavailable{filter:grayscale(1) brightness(.43);opacity:.7;pointer-events:none;cursor:not-allowed}
.charEquipmentItemContainer.lorEquipUnavailable .charEquipmentItemContainerBox{background-color:rgba(0,0,0,.5)}