.energy-conversion{grid-column:1/3;position:relative;font-size:10px;z-index:12}.energy-conversion[hidden]{display:none}.energy-conversion summary{cursor:pointer;width:max-content;max-width:100%;padding:3px 0;color:inherit}.energy-conversion summary:focus-visible{outline:2px solid #78c7c4;outline-offset:2px}.energy-conversion-panel{position:absolute;top:100%;right:0;box-sizing:border-box;width:min(290px,calc(var(--hud-logical-width,100vw) - 32px));max-height:min(300px,calc(var(--hud-logical-height,100vh) - 180px));overflow:auto;overscroll-behavior:contain;padding:12px;background:#f5f7ef;color:#233731;border:1px solid #91a79c;box-shadow:0 5px 20px #0005;border-radius:4px}.game-ui .energy-conversion-panel{background:#162923;color:#d6e9dc;border-color:#506d60}.energy-conversion label{display:flex;align-items:center;gap:10px}.energy-conversion input{min-width:70px;width:100%;accent-color:#90cfa7}.energy-conversion output{display:block;min-height:1.4em;margin-top:8px}.energy-conversion p{display:block!important;font-size:10px;line-height:1.4;max-width:none;margin:8px 0 0}.energy-conversion input:disabled{opacity:.5}

/* The popup uses the scaled HUD viewport and the full topbar as its anchor. */
.game-ui .hud-topbar:has(.energy-conversion:not([hidden])){z-index:9}
.game-ui .hud-topbar .energy-conversion{position:static}
.game-ui .hud-topbar .energy-conversion-panel{right:8px;top:calc(100% + 4px)}
/* A bottom-anchored tools row collides with a taller resource bar at small
   logical heights. Flow the existing five control regions instead of hiding
   any tool or estimating the topbar's height. */
[data-hud-layout=narrow][data-hud-short=true] .game-chrome:has(.energy-conversion:not([hidden])){box-sizing:border-box;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:6px;padding:6px 6px 0}
[data-hud-layout=narrow][data-hud-short=true] .game-chrome:has(.energy-conversion:not([hidden])) .hud-topbar{grid-row:1;position:relative;inset:auto}
[data-hud-layout=narrow][data-hud-short=true] .game-chrome:has(.energy-conversion:not([hidden])) .hud-field-tools{grid-row:2;position:relative;inset:auto;max-width:none}
[data-hud-layout=narrow][data-hud-short=true] .game-chrome:has(.energy-conversion:not([hidden])) #hud-groups{grid-row:3;position:relative;inset:auto;min-width:0}
[data-hud-layout=narrow][data-hud-short=true] .game-chrome:has(.energy-conversion:not([hidden])) #control-groups{flex-wrap:wrap}
[data-hud-layout=narrow][data-hud-short=true] .game-chrome:has(.energy-conversion:not([hidden])) .hud-dock{grid-row:4;position:relative;inset:auto;height:auto;min-height:0;grid-template-rows:80px minmax(150px,1fr);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
[data-hud-layout=narrow][data-hud-short=true] .game-chrome:has(.energy-conversion:not([hidden])) .hud-statusbar{grid-row:5;position:relative;inset:auto;min-width:0;padding-inline:6px}
/* Keep existing Forces/Map popovers below the topbar and tools in this flow. */
[data-hud-layout=narrow][data-hud-short=true] .game-chrome:has(.energy-conversion:not([hidden])) :is(#hud-minimap,#hud-rosters){grid-row:3/5;top:0;bottom:auto}