/* Icônes peintes de l'interface (voir dist/ui-icons.js) : même style que les objets de la sacoche. */
.painted{display:block;object-fit:contain;user-select:none;pointer-events:none}
/* Boutons ronds du haut (son, aide) */
.icon-button{display:inline-grid;place-items:center}
.icon-button .painted{width:68%;height:68%;filter:drop-shadow(0 2px 2px #0009)}
/* Jauges : une petite icône devant chaque étiquette */
.label-icon{display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:-4px;filter:drop-shadow(0 1px 1px #000a)}
.level-chip,.shard-chip{display:inline-flex;align-items:center}
.shard-chip .label-icon{width:18px;height:18px}
/* Carte de quête : un parchemin posé sur l'angle */
.quest{overflow:visible}
.quest-icon{position:absolute;top:-17px;right:8px;width:50px;height:50px;transform:rotate(9deg);filter:drop-shadow(0 4px 3px #0007)}
/* Barre d'action : la peinture remplit le médaillon */
.abilities .ability-icon{width:46px;height:46px}
.ability-icon .spell-icon{width:84%;height:84%}
.ability.locked .ability-icon .spell-icon,.ability.unavailable .ability-icon .spell-icon{filter:grayscale(.8) brightness(.6)}
.ability-icon .painted{width:100%;height:100%;filter:drop-shadow(0 3px 3px #0009)}
.ability.locked .ability-icon .painted,.ability.unavailable .ability-icon .painted{filter:grayscale(.8) brightness(.6)}
/* Boutons de menu : carnet, sacoche, talents */
.menu-icon{display:inline-block;width:24px;height:24px;margin-right:7px;vertical-align:middle;filter:drop-shadow(0 2px 2px #0009)}
.inventory-hint button{display:flex;align-items:center}
/* Trois commandes identiques ; le sceau doré n'apparaît qu'avec des points à dépenser. */
.inventory-hint{width:164px;align-items:stretch}
.inventory-hint button{position:relative;display:grid;grid-template-columns:24px 23px 1fr;align-items:center;column-gap:6px;width:164px;min-width:164px;height:44px;padding:6px 30px 6px 8px;box-sizing:border-box;text-align:left}
.inventory-hint .menu-icon{width:24px;height:24px;margin:0}
.inventory-hint kbd{margin:0;justify-self:start}
.inventory-hint .menu-label{white-space:nowrap}
.inventory-hint .menu-points{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border:1px solid #f5dda6;border-radius:50%;background:linear-gradient(145deg,#ffe4a0,#c18b3e);box-shadow:inset 0 1px #fff3d4,0 2px 0 #49351c,0 0 8px #f0be6388;color:#352411;font:800 10px 'Segoe UI',sans-serif;line-height:1;z-index:1}
.inventory-hint .menu-points[hidden]{display:none}
.inventory-hint #notebookCount{position:absolute;right:8px;bottom:5px;margin:0;color:#e7c991;font:700 9px 'Segoe UI',sans-serif;letter-spacing:.03em}
.inventory-hint button.has-points{border-color:#e5bd76;box-shadow:inset 0 0 0 2px #1a2b21,0 0 0 1px #f3d39488,0 0 15px #e7b85666}
/* Création : classes et spécialités */
.class-icon{width:58px;height:58px}
.class-icon .painted{width:88%;height:88%;filter:drop-shadow(0 2px 2px #0009)}
/* Sacoche : emplacements vides et caractéristiques */
.slot-empty{display:grid;place-items:center}
.slot-empty .painted{width:34px;height:34px;opacity:.38;filter:grayscale(.6)}
.attr-name{display:flex;align-items:center;gap:9px}
.attr-icon{width:34px;height:34px;flex:none}
.attr-icon .painted{width:100%;height:100%;filter:drop-shadow(0 2px 2px #0009)}
.attr-label{display:flex;flex-direction:column}
/* Un halo clair derrière la peinture : les icônes sombres (arc, bâton) restent lisibles sur le cuir */
.abilities .ability-icon{border-radius:50%;background:radial-gradient(circle at 50% 42%,#d9c79b66,#d9c79b14 62%,transparent 72%)}
.icon-button .painted{width:76%;height:76%}
.st-orb .painted,.st-slot-icon .painted,.st-detail-orb .painted,.class-icon .painted{filter:drop-shadow(0 2px 2px #000a) drop-shadow(0 0 4px #e9d9ae44)}
/* Onglet Apparence de la sacoche */
.look-row{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #8b72492b}
.look-label{color:#d9c49a;font:600 12px 'Segoe UI',sans-serif;letter-spacing:.04em}