/* The Énergie tab of the skills window (K): one row per colour, the count against the cap, the total bonus. */
.en-panel { display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
.en-head p { margin: 2px 0 0; font-size: calc(11.5px * var(--ui-text)); }
.en-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.en-row { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 6px; padding: 4px 6px; min-width: 0; border: 1px solid var(--gf-tile-edge, #716c94); border-radius: 4px; background: rgba(255, 255, 255, 0.35); }
.en-ico { position: relative; width: 42px; height: 42px; }
.en-ico img { display: block; width: 100%; height: 100%; }
.en-n { position: absolute; right: 1px; bottom: 0; font-size: var(--fs-small); font-weight: 800; line-height: 1; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.en-row.full { box-shadow: inset 0 0 0 1px #3f9a3a; }
.en-text { display: flex; flex-direction: column; min-width: 0; }
.en-name { font-weight: 800; font-size: calc(12.5px * var(--ui-text)); line-height: 1.15; }
.en-eff { font-size: var(--fs-small); opacity: 0.85; line-height: 1.2; }
.en-bonus { font-size: var(--fs-small); color: #2f7a2b; }
.en-count { font-weight: 800; font-size: calc(11.5px * var(--ui-text)); white-space: nowrap; color: #2f5d8a; }
.en-total { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 6px; border-top: 1px solid var(--gf-tile-edge, #716c94); font-size: calc(12.5px * var(--ui-text)); }